/* ===========================================================================
   Tayfa — design tokens
   Single source of truth. Components never hard-code a colour, space or radius.

   Three themes:
     koyu  (default)  bare :root            — the committed default
     açık             [data-theme="light"]   + prefers-color-scheme: light
     gece             [data-theme="night"]   — true black, OLED / night viewing
   Only tokens are redefined per theme. No component ever reads the theme.
   =========================================================================== */

:root {
  /* ---- surface ladder -------------------------------------------------- */
  --bg-base:      #07090b;   /* page */
  --bg-surface:   #0f1114;   /* card, sidebar, topbar */
  --bg-elevated:  #16191d;   /* dropdown, modal, hover */
  --bg-overlay:   #1d2126;   /* input, chip, card inside a card */
  --bg-scrim:     rgba(3, 5, 7, .72);

  --border:        #24282e;
  --border-strong: #32373e;

  /* ---- text ------------------------------------------------------------ */
  --fg:        #f5f7f8;
  --fg-muted:  #9aa2ab;
  --fg-subtle: #676e76;

  /* ---- brand ----------------------------------------------------------- */
  --accent:       #ff8a1f;
  --accent-hover: #f07400;
  --accent-press: #d96200;
  --accent-fg:    #140a02;   /* text ON accent — never white, contrast 2.4:1 */
  --accent-soft:  color-mix(in oklab, var(--accent) 14%, var(--bg-surface));
  --accent-ring:  color-mix(in oklab, var(--accent) 55%, transparent);

  /* ---- semantic -------------------------------------------------------- */
  --live:        #e00e40;
  --live-hover:  #c20c38;
  --live-soft:   rgba(224, 14, 64, .14);
  --success:     #22c55e;
  --warning:     #f5a623;
  --danger:      #ef4444;
  --danger-hover:#d93434;
  --danger-soft: color-mix(in oklab, var(--danger) 14%, var(--bg-surface));

  /* Text on a danger or live fill. White in every theme, but named rather
     than written: a component that hardcodes #fff cannot be retuned when a
     theme makes the fill lighter, and the rule against literal colours
     exists so that stays possible. */
  --danger-fg:   #ffffff;
  --live-fg:     #ffffff;
  --info:        #3b9eff;

  /* ---- chat identity --------------------------------------------------- */
  --tier-1:      #6ea8ff;
  --tier-2:      #a78bfa;
  --tier-3:      #ffd43b;
  --mod:         #22c55e;
  --vip:         #ec4899;
  --broadcaster: var(--live);

  /* ---- type ------------------------------------------------------------ */
  --font-sans: "Inter", "Inter Variable", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --fs-display: 32px;  --lh-display: 40px;
  --fs-h1:      24px;  --lh-h1:      32px;
  --fs-h2:      20px;  --lh-h2:      28px;
  --fs-h3:      16px;  --lh-h3:      24px;
  --fs-body:    14px;  --lh-body:    20px;
  --fs-small:   13px;  --lh-small:   18px;
  --fs-caption: 12px;  --lh-caption: 16px;
  --fs-micro:   11px;  --lh-micro:   14px;

  /* ---- space (no in-between values) ------------------------------------ */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 20px;  --space-6: 24px;  --space-8: 32px;  --space-10: 40px;
  --space-12: 48px; --space-16: 64px;

  /* ---- radius ---------------------------------------------------------- */
  --radius-sm:   4px;   /* badge, chip */
  --radius-md:   6px;   /* button, input */
  --radius-lg:   8px;   /* card, thumbnail */
  --radius-xl:   12px;  /* modal, panel */
  --radius-full: 9999px;

  /* ---- elevation ------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, .45);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, .55);
  --glow-accent: 0 0 0 1px var(--accent-ring),
                 0 4px 24px -4px color-mix(in oklab, var(--accent) 40%, transparent);

  /* ---- motion ---------------------------------------------------------- */
  --dur-micro: 100ms;
  --dur-fast:  150ms;
  --dur-base:  200ms;
  --dur-slow:  250ms;
  --ease-out:    cubic-bezier(.2, 0, .2, 1);
  --ease-in:     cubic-bezier(.4, 0, 1, 1);
  --ease-spring: cubic-bezier(.34, 1.3, .64, 1);

  /* ---- fixed layout metrics (these do not change) ---------------------- */
  --topbar-h:        56px;
  --sidebar-w:       240px;
  --sidebar-w-collapsed: 72px;
  --chat-w:          340px;
  --chat-w-min:      300px;
  --chat-w-max:      440px;

  --control-h-sm: 28px;
  --control-h:    36px;
  --control-h-lg: 44px;

  --avatar-xs: 20px;  --avatar-sm: 28px;  --avatar-md: 40px;
  --avatar-lg: 64px;  --avatar-xl: 96px;

  --icon-sm: 16px;    --icon-md: 20px;    --icon-lg: 28px;

  /* ---- z-index --------------------------------------------------------- */
  --z-sticky:  100;
  --z-dropdown:200;
  --z-scrim:   300;
  --z-modal:   400;
  --z-toast:   500;
  --z-tooltip: 600;
}

/* ---- light theme: only tokens are redefined, never components --------- */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg-base:      #ffffff;
    --bg-surface:   #f6f7f9;
    --bg-elevated:  #ffffff;
    --bg-overlay:   #eef0f3;
    --bg-scrim:     rgba(12, 15, 19, .45);

    --border:        #e2e5e9;
    --border-strong: #cdd2d8;

    --fg:        #0d1014;
    --fg-muted:  #585f67;
    --fg-subtle: #868d95;

    /* Orange needs darkening on light ground to clear 4.5:1 */
    --accent:       #c45800;
    --accent-hover: #a84a00;
    --accent-press: #8d3e00;
    --accent-fg:    #ffffff;

    --live:       #c20c38;
    --live-hover: #a60a2f;
    --live-soft:  rgba(194, 12, 56, .1);
    --success:    #15794a;
    --warning:    #9a6200;
    --danger:     #c2203c;
    --danger-hover:#a51a32;
    --info:       #1668c7;

    --shadow-sm: 0 1px 2px rgba(13, 16, 20, .08);
    --shadow-md: 0 4px 12px rgba(13, 16, 20, .1);
    --shadow-lg: 0 12px 32px rgba(13, 16, 20, .14);
  }
}

:root[data-theme="light"] {
  --bg-base:      #ffffff;
  --bg-surface:   #f6f7f9;
  --bg-elevated:  #ffffff;
  --bg-overlay:   #eef0f3;
  --bg-scrim:     rgba(12, 15, 19, .45);

  --border:        #e2e5e9;
  --border-strong: #cdd2d8;

  --fg:        #0d1014;
  --fg-muted:  #585f67;
  --fg-subtle: #868d95;

  --accent:       #c45800;
  --accent-hover: #a84a00;
  --accent-press: #8d3e00;
  --accent-fg:    #ffffff;

  --live:       #c20c38;
  --live-hover: #a60a2f;
  --live-soft:  rgba(194, 12, 56, .1);
  --success:    #15794a;
  --warning:    #9a6200;
  --danger:     #c2203c;
  --danger-hover:#a51a32;
  --info:       #1668c7;

  --shadow-sm: 0 1px 2px rgba(13, 16, 20, .08);
  --shadow-md: 0 4px 12px rgba(13, 16, 20, .1);
  --shadow-lg: 0 12px 32px rgba(13, 16, 20, .14);
}

/* ---- gece: true black -------------------------------------------------
   Why a third theme and not a variant: on an OLED panel #000 draws no power
   and the letterbox around a 16:9 player disappears into the page, so the
   video is the only lit thing on screen. Shadows are invisible on pure
   black, so elevation is carried by borders — that is why the border
   tokens step up here instead of the shadows.
   There is no OS preference for this; it is toggle-only.                 */
:root[data-theme="night"] {
  --bg-base:      #000000;
  --bg-surface:   #0a0c0e;
  --bg-elevated:  #121519;
  --bg-overlay:   #191d22;
  --bg-scrim:     rgba(0, 0, 0, .8);

  --border:        #1e2227;
  --border-strong: #2e343b;

  --fg:        #ffffff;
  --fg-muted:  #a2aab2;
  --fg-subtle: #6d757d;

  /* Orange reads brighter on pure black: 8.9:1 instead of 8.1:1 */
  --accent:       #ff8a1f;
  --accent-hover: #ffa047;
  --accent-press: #f07400;
  --accent-fg:    #140a02;

  --live:       #ff1f4f;
  --live-hover: #e00e40;
  --live-soft:  rgba(255, 31, 79, .14);
  --success:    #2ad36a;
  --warning:    #ffb02e;
  --danger:     #ff4d4d;
  --danger-hover:#ef3b3b;
  --info:       #4aa8ff;

  /* elevation through borders, not shadows */
  --shadow-sm: 0 0 0 1px var(--border);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, .9), 0 0 0 1px var(--border);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, .95), 0 0 0 1px var(--border-strong);
}

/* ===========================================================================
   CHAT APP LAYER
   The app is four vertical surfaces side by side — server rail, channel
   sidebar, message column, member list — and they have to step from darkest
   to lightest in that order. The generic ladder cannot express that: on the
   light theme --bg-base is the *lightest* value, so mapping the rail to it
   would invert the whole hierarchy. Hence four named surfaces resolved per
   theme, and components only ever read the names.
   =========================================================================== */
:root {
  /* ---- fixed layout metrics -------------------------------------------- */
  --rail-w:       72px;   /* server rail */
  --channels-w:   240px;  /* channel sidebar */
  --members-w:    240px;  /* member list */
  --chead-h:      48px;   /* channel header — deliberately shorter than --topbar-h */
  --userbar-h:    52px;
  --chan-h:       32px;   /* one channel row */
  --member-h:     42px;   /* one member row */
  --guild-size:   48px;
  --guild-radius: 16px;   /* a third of the icon: the squircle a circle morphs into */
  --mbar-h:       56px;   /* mobile bottom tab bar */

  /* Message text is its own scale. Chat is read as prose in a long column, so
     it runs larger and looser than --fs-body; 14/20 in this layout reads as a
     log file rather than a conversation. */
  --fs-msg: 15px;  --lh-msg: 22px;

  /* ---- the four surfaces ----------------------------------------------- */
  --rail-bg:     var(--bg-base);
  --channels-bg: var(--bg-surface);
  --chat-bg:     var(--bg-elevated);
  --input-bg:    var(--bg-overlay);
  --userbar-bg:  #0b0d10;   /* one step under the sidebar it is docked into */
  --voice-bg:    #05070a;   /* video reads against near-black, not against a surface */

  /* Row feedback is alpha, not a surface value: the same channel row sits on
     the sidebar and on the mobile drawer, and a fixed colour would only match
     one of them. The generic ladder has no step this fine. */
  --row-hover:  rgba(255, 255, 255, .04);
  --row-active: rgba(255, 255, 255, .08);
  --msg-hover:  rgba(255, 255, 255, .025);

  /* ---- presence --------------------------------------------------------- */
  --status-online:  var(--success);
  --status-idle:    var(--warning);
  --status-dnd:     var(--danger);
  --status-offline: var(--fg-subtle);

  /* ---- roles -----------------------------------------------------------
     The chat identity tokens above already carry the coloured-name palette.
     These are the names the markup uses, so a coloured name reads as a role
     and not as a hex value someone liked. */
  --role-owner: var(--tier-3);
  --role-admin: var(--live);
  --role-mod:   var(--mod);
  --role-dev:   var(--tier-1);
  --role-boost: var(--vip);
  --role-bot:   var(--tier-2);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --rail-bg:     #e1e3e8;
    --channels-bg: #f1f2f5;
    --chat-bg:     #ffffff;
    --input-bg:    #ebedf0;
    --userbar-bg:  #e9ebef;
    --voice-bg:    #dfe2e7;

    --row-hover:  rgba(6, 6, 7, .04);
    --row-active: rgba(6, 6, 7, .08);
    --msg-hover:  rgba(6, 6, 7, .025);
  }
}

:root[data-theme="light"] {
  --rail-bg:     #e1e3e8;
  --channels-bg: #f1f2f5;
  --chat-bg:     #ffffff;
  --input-bg:    #ebedf0;
  --userbar-bg:  #e9ebef;
  --voice-bg:    #dfe2e7;

  --row-hover:  rgba(6, 6, 7, .04);
  --row-active: rgba(6, 6, 7, .08);
  --msg-hover:  rgba(6, 6, 7, .025);
}

:root[data-theme="night"] {
  --rail-bg:     #000000;
  --channels-bg: #050607;
  --chat-bg:     #0b0d0f;
  --input-bg:    #15181c;
  --userbar-bg:  #000000;
  --voice-bg:    #000000;

  --row-hover:  rgba(255, 255, 255, .05);
  --row-active: rgba(255, 255, 255, .10);
  --msg-hover:  rgba(255, 255, 255, .03);
}