@charset "UTF-8";

/*
  RookX design tokens
  -------------------
  New and redesigned UI should use the --rx-* names in this file.
  The short legacy names remain as compatibility bridges for existing pages.
*/

:root {
  /* RookX owns its complete dark and light palettes. The `only` keyword asks
     compatible browsers not to repaint the selected theme. Samsung Internet
     can ignore this in its strongest Dark sites mode; theme-policy.js then
     selects RookX's native dark palette before the page is painted. */
  color-scheme: only dark;

  /* Typography */
  --rx-font-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  --rx-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --rx-font-size-xs: 0.72rem;
  --rx-font-size-sm: 0.84rem;
  --rx-font-size-body: 1rem;
  --rx-font-size-title: 1.5rem;
  --rx-font-weight-regular: 400;
  --rx-font-weight-strong: 700;
  --rx-font-weight-heavy: 900;
  --rx-line-height-tight: 1.15;
  --rx-line-height-body: 1.5;

  /* Spacing: four-pixel rhythm */
  --rx-space-0: 0;
  --rx-space-1: 4px;
  --rx-space-2: 8px;
  --rx-space-3: 12px;
  --rx-space-4: 16px;
  --rx-space-5: 20px;
  --rx-space-6: 24px;
  --rx-space-8: 32px;

  /* Shape and sizing */
  --rx-radius-compact: 10px;
  --rx-radius-control: 14px;
  --rx-radius-panel: 18px;
  --rx-radius-pill: 999px;
  --rx-radius-avatar: 24%;
  --rx-size-tap-min: 44px;
  /* Browser insets, with the official Capacitor SystemBars fallback for
     Android WebViews that do not expose correct env() values. */
  --rx-safe-top: var(--safe-area-inset-top, env(safe-area-inset-top, 0px));
  --rx-safe-right: var(--safe-area-inset-right, env(safe-area-inset-right, 0px));
  --rx-safe-bottom: var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));
  --rx-safe-left: var(--safe-area-inset-left, env(safe-area-inset-left, 0px));
  --rx-size-topbar-min: calc(64px + var(--rx-safe-top));
  --rx-size-topbar: var(--rx-header-height, var(--rx-size-topbar-min));

  /* Page frames: one gutter system with a small set of content widths. */
  --rx-page-gutter: clamp(10px, 2vw, 16px);
  --rx-page-width-narrow: 680px;
  --rx-page-width-reading: 980px;
  --rx-page-width-standard: 1180px;
  --rx-page-width-wide: 1380px;

  /* Motion */
  --rx-duration-fast: 120ms;
  --rx-duration-standard: 180ms;
  --rx-duration-slow: 230ms;
  --rx-ease-standard: ease;
  --rx-ease-emphasized: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* Layering */
  --rx-layer-content: 1;
  --rx-layer-dropdown: 30;
  --rx-layer-sticky: 1000;
  --rx-layer-chat: 1500;
  --rx-layer-overlay: 10000;
  --rx-layer-modal: 10002;

  /* Default dark semantic colors */
  --rx-color-page: #07040a;
  --rx-color-page-secondary: #0b1020;
  --rx-color-overlay-solid: #0b1020;
  --rx-color-topbar: rgba(10, 12, 18, 0.70);
  --rx-color-sidebar: rgba(255,255,255,0.035);
  --rx-color-surface: rgba(255,255,255,0.06);
  --rx-color-surface-raised: rgba(255,255,255,0.045);
  --rx-color-surface-subtle: rgba(255,255,255,0.035);
  --rx-color-surface-quiet: rgba(255,255,255,0.028);
  --rx-color-text: rgba(255,255,255,0.92);
  --rx-color-text-muted: rgba(255,255,255,0.68);
  --rx-color-text-subtle: rgba(255,255,255,0.56);
  --rx-color-on-media: rgba(255,255,255,0.92);
  --rx-color-border: rgba(255,255,255,0.10);
  --rx-color-border-strong: rgba(255,255,255,0.14);
  --rx-color-control: rgba(255,255,255,0.06);
  --rx-color-control-hover: rgba(255,255,255,0.10);
  --rx-background-page:
    radial-gradient(1200px 700px at 18% -10%, rgba(var(--rx-color-accent-rgb),0.38), transparent 58%),
    radial-gradient(900px 600px at 92% 0%, rgba(var(--rx-color-accent-secondary-rgb),0.22), transparent 62%),
    radial-gradient(900px 600px at 70% 115%, rgba(var(--rx-color-accent-secondary-rgb),0.15), transparent 55%),
    linear-gradient(180deg, var(--rx-color-page), var(--rx-color-page-secondary));

  /* Brand and status */
  /* The page and full-screen overlays share the same quiet board texture. */
  --rx-pattern-ink: rgba(255,255,255,0.70);
  --rx-pattern-opacity: 0.06;
  --rx-pattern-blend: overlay;
  --rx-background-pattern:
    linear-gradient(45deg, var(--rx-pattern-ink) 25%, transparent 25%, transparent 75%, var(--rx-pattern-ink) 75%, var(--rx-pattern-ink)),
    linear-gradient(45deg, var(--rx-pattern-ink) 25%, transparent 25%, transparent 75%, var(--rx-pattern-ink) 75%, var(--rx-pattern-ink));

  --rx-color-accent: #8b5cf6;
  --rx-color-accent-secondary: #ec4899;
  --rx-color-accent-rgb: 139, 92, 246;
  --rx-color-accent-secondary-rgb: 236, 72, 153;
  --rx-color-on-accent: rgba(255,255,255,0.96);
  --rx-color-success: #22c55e;
  --rx-color-danger: #ef4444;
  --rx-color-warning: #f59e0b;
  --rx-color-focus: rgba(var(--rx-color-accent-rgb),0.36);

  /* Depth */
  --rx-shadow-popover: 0 10px 28px rgba(0,0,0,0.26);
  --rx-shadow-overlay: 0 22px 70px rgba(0,0,0,0.55);
  --rx-shadow-raised: 0 14px 34px rgba(0,0,0,0.40);

  /* Brand assets and board preferences */
  /* Logo artwork owns tint; these shared filters stay neutral in every theme. */
  --rx-logo-filter: saturate(106%) brightness(1.02) contrast(1.02);
  --rx-wordmark-filter: saturate(106%) brightness(1.02) contrast(1.02);
  --rx-board-light: #f4f0e6;
  --rx-board-dark: #485161;

  /* Compatibility bridges. Do not use these names in newly redesigned UI. */
  --bg: var(--rx-color-page);
  --bg2: var(--rx-color-page-secondary);
  --topbar: var(--rx-color-topbar);
  --sidebar: var(--rx-color-sidebar);
  --panel: var(--rx-color-surface);
  --panel2: var(--rx-color-surface-raised);
  --panel3: var(--rx-color-surface-subtle);
  --panel4: var(--rx-color-surface-quiet);
  --text: var(--rx-color-text);
  --muted: var(--rx-color-text-muted);
  --muted2: var(--rx-color-text-subtle);
  --border: var(--rx-color-border);
  --border2: var(--rx-color-border-strong);
  --accent: var(--rx-color-accent);
  --accent2: var(--rx-color-accent-secondary);
  --accent-2: var(--rx-color-accent-secondary);
  --accent-rgb: var(--rx-color-accent-rgb);
  --accent2-rgb: var(--rx-color-accent-secondary-rgb);
  --accentText: var(--rx-color-on-accent);
  --success: var(--rx-color-success);
  --danger: var(--rx-color-danger);
  --warning: var(--rx-color-warning);
  --btn: var(--rx-color-control);
  --btnHover: var(--rx-color-control-hover);
  --focus: var(--rx-color-focus);
  --shadow: var(--rx-shadow-overlay);
  --shadowSm: var(--rx-shadow-raised);
  --radius: var(--rx-radius-panel);
  --radiusSm: var(--rx-radius-control);
  --topbarH: var(--rx-size-topbar);
  --site-logo-filter: var(--rx-logo-filter);
  --site-wordmark-filter: var(--rx-wordmark-filter);
  --rookx-board-light: var(--rx-board-light);
  --rookx-board-dark: var(--rx-board-dark);
}

:root[data-board-theme="classic"] {
  --rx-board-light: #f4f0e6;
  --rx-board-dark: #485161;
}

:root[data-board-theme="green"] {
  --rx-board-light: #eeeed2;
  --rx-board-dark: #769656;
}

:root[data-board-theme="blue"] {
  --rx-board-light: #d8edf7;
  --rx-board-dark: #4f88a8;
}

:root[data-board-theme="wood"] {
  --rx-board-light: #ead1aa;
  --rx-board-dark: #a87548;
}

:root[data-board-theme="slate"] {
  --rx-board-light: #e8edf2;
  --rx-board-dark: #596575;
}

:root[data-tint="purple"] {
  --rx-color-accent: #8b5cf6;
  --rx-color-accent-secondary: #ec4899;
  --rx-color-accent-rgb: 139, 92, 246;
  --rx-color-accent-secondary-rgb: 236, 72, 153;
  --rx-color-on-accent: rgba(255,255,255,0.96);
}

:root[data-tint="blue"] {
  --rx-color-accent: #2563eb;
  --rx-color-accent-secondary: #06b6d4;
  --rx-color-accent-rgb: 37, 99, 235;
  --rx-color-accent-secondary-rgb: 6, 182, 212;
  --rx-color-on-accent: rgba(255,255,255,0.96);
}

:root[data-tint="red"] {
  --rx-color-accent: #e11d48;
  --rx-color-accent-secondary: #f97316;
  --rx-color-accent-rgb: 225, 29, 72;
  --rx-color-accent-secondary-rgb: 249, 115, 22;
  --rx-color-on-accent: rgba(255,255,255,0.96);
}

:root[data-tint="green"] {
  --rx-color-accent: #16a34a;
  --rx-color-accent-secondary: #14b8a6;
  --rx-color-accent-rgb: 22, 163, 74;
  --rx-color-accent-secondary-rgb: 20, 184, 166;
  --rx-color-on-accent: rgba(255,255,255,0.96);
}

:root[data-tint="yellow"] {
  --rx-color-accent: #eab308;
  --rx-color-accent-secondary: #f97316;
  --rx-color-accent-rgb: 234, 179, 8;
  --rx-color-accent-secondary-rgb: 249, 115, 22;
  --rx-color-on-accent: #17120a;
}

:root[data-tint="black"] {
  --rx-color-accent: #64748b;
  --rx-color-accent-secondary: #334155;
  --rx-color-accent-rgb: 100, 116, 139;
  --rx-color-accent-secondary-rgb: 51, 65, 85;
  --rx-color-on-accent: rgba(255,255,255,0.96);
}

@supports (color: color-mix(in srgb, black, white)) {
  :root[data-theme="dark"][data-tint] {
    --rx-color-page: color-mix(in srgb, #07040a 76%, rgba(var(--rx-color-accent-rgb), 0.24));
    --rx-color-page-secondary: color-mix(in srgb, #0b1020 78%, rgba(var(--rx-color-accent-secondary-rgb), 0.22));
    --rx-color-overlay-solid: color-mix(in srgb, #0b1020 88%, var(--rx-color-accent) 12%);
    --rx-color-topbar: color-mix(in srgb, rgba(10,12,18,0.78) 88%, rgba(var(--rx-color-accent-rgb),0.12) 12%);
    --rx-color-sidebar: color-mix(in srgb, rgba(255,255,255,0.035) 86%, rgba(var(--rx-color-accent-rgb),0.08) 14%);
    --rx-color-surface: color-mix(in srgb, rgba(255,255,255,0.060) 88%, rgba(var(--rx-color-accent-rgb),0.08) 12%);
    --rx-color-surface-raised: color-mix(in srgb, rgba(255,255,255,0.045) 90%, rgba(var(--rx-color-accent-secondary-rgb),0.07) 10%);
    --rx-color-surface-subtle: color-mix(in srgb, rgba(255,255,255,0.035) 92%, rgba(var(--rx-color-accent-rgb),0.06) 8%);
    --rx-color-surface-quiet: color-mix(in srgb, rgba(255,255,255,0.028) 93%, rgba(var(--rx-color-accent-secondary-rgb),0.06) 7%);
    --rx-color-focus: rgba(var(--rx-color-accent-rgb),0.22);
  }
}

:root[data-theme="light"] {
  --rx-pattern-ink: rgba(15,23,42,0.90);
  --rx-pattern-opacity: 0.035;
  --rx-pattern-blend: multiply;
  color-scheme: only light;
  --rx-color-page: #f7f6fb;
  --rx-color-page-secondary: #eef2ff;
  --rx-color-overlay-solid: #ffffff;
  --rx-color-topbar: rgba(255, 255, 255, 0.75);
  --rx-color-sidebar: rgba(15, 23, 42, 0.04);
  --rx-color-surface: rgba(255,255,255,0.85);
  --rx-color-surface-raised: rgba(255,255,255,0.72);
  --rx-color-surface-subtle: rgba(15, 23, 42, 0.04);
  --rx-color-surface-quiet: rgba(15, 23, 42, 0.03);
  --rx-color-text: #0b1220;
  --rx-color-text-muted: rgba(15, 23, 42, 0.72);
  --rx-color-text-subtle: rgba(15, 23, 42, 0.58);
  --rx-color-border: rgba(15, 23, 42, 0.12);
  --rx-color-border-strong: rgba(15, 23, 42, 0.16);
  --rx-color-control: rgba(15, 23, 42, 0.06);
  --rx-color-control-hover: rgba(15, 23, 42, 0.10);
  --rx-color-success: #15803d;
  --rx-color-danger: #b91c1c;
  --rx-color-warning: #b45309;
  --rx-shadow-popover: 0 8px 24px rgba(15, 23, 42, 0.10);
  --rx-shadow-overlay: 0 18px 60px rgba(15, 23, 42, 0.12);
  --rx-shadow-raised: 0 12px 30px rgba(15, 23, 42, 0.12);
  --rx-color-focus: rgba(var(--rx-color-accent-rgb),0.22);
}

@supports (color: color-mix(in srgb, black, white)) {
  :root[data-theme="light"][data-tint] {
    --rx-color-page: color-mix(in srgb, #f7f6fb 82%, rgba(var(--rx-color-accent-rgb), 0.18));
    --rx-color-page-secondary: color-mix(in srgb, #eef2ff 84%, rgba(var(--rx-color-accent-secondary-rgb), 0.16));
    --rx-color-overlay-solid: #ffffff;
    --rx-color-topbar: color-mix(in srgb, rgba(255,255,255,0.82) 92%, rgba(var(--rx-color-accent-rgb),0.08) 8%);
    --rx-color-sidebar: color-mix(in srgb, rgba(255,255,255,0.35) 78%, rgba(var(--rx-color-accent-rgb),0.12) 22%);
    --rx-color-surface: color-mix(in srgb, #ffffff 88%, rgba(var(--rx-color-accent-rgb), 0.12) 12%);
    --rx-color-surface-raised: color-mix(in srgb, #ffffff 90%, rgba(var(--rx-color-accent-secondary-rgb), 0.10) 10%);
    --rx-color-surface-subtle: color-mix(in srgb, #ffffff 93%, rgba(var(--rx-color-accent-rgb), 0.07) 7%);
    --rx-color-surface-quiet: color-mix(in srgb, #ffffff 94%, rgba(var(--rx-color-accent-secondary-rgb), 0.06) 6%);
    --rx-color-control: color-mix(in srgb, #ffffff 86%, rgba(var(--rx-color-accent-rgb), 0.14) 14%);
    --rx-color-control-hover: color-mix(in srgb, #ffffff 82%, rgba(var(--rx-color-accent-rgb), 0.18) 18%);
    --rx-color-focus: rgba(var(--rx-color-accent-rgb),0.16);
  }
}

:root[data-theme="dark"][data-tint="black"] {
  --rx-color-page: #050a12;
  --rx-color-page-secondary: #0b1522;
  --rx-color-topbar: rgba(6,12,21,0.86);
  --rx-color-sidebar: rgba(148,163,184,0.045);
  --rx-color-surface: rgba(148,163,184,0.085);
  --rx-color-surface-raised: rgba(100,116,139,0.075);
  --rx-color-surface-subtle: rgba(148,163,184,0.052);
  --rx-color-surface-quiet: rgba(100,116,139,0.042);
  --rx-color-control: rgba(148,163,184,0.09);
  --rx-color-control-hover: rgba(186,201,220,0.15);
  --rx-color-focus: rgba(186,201,220,0.30);
}

:root[data-theme="light"][data-tint="black"] {
  --rx-color-page: #edf2f7;
  --rx-color-page-secondary: #d9e2ec;
  --rx-color-topbar: rgba(248,250,252,0.86);
  --rx-color-sidebar: rgba(71,85,105,0.065);
  --rx-color-surface: rgba(255,255,255,0.90);
  --rx-color-surface-raised: rgba(241,245,249,0.84);
  --rx-color-surface-subtle: rgba(71,85,105,0.07);
  --rx-color-surface-quiet: rgba(71,85,105,0.045);
  --rx-color-control: rgba(71,85,105,0.09);
  --rx-color-control-hover: rgba(71,85,105,0.15);
  --rx-color-focus: rgba(71,85,105,0.25);
}