/* ============================================================================
   TLAIOS DESIGN TOKENS  (V9.3 redesign / Task WS0)
   ----------------------------------------------------------------------------
   ONE shared design-token + base-component stylesheet for every TLAIOS page.
   Brand spine is FIXED: navy / gold / cream + "T" mark + classic serif spirit.

   Usage: later workstreams import this once per page, e.g.
     <link rel="stylesheet" href="/design-tokens.css">
   (NOTE: a server route must expose this file at /design-tokens.css; see the
    WS0 handoff. The prototype dir is NOT a blanket static web root.)

   Rules:
     - Additive + opt-in. Component classes are prefixed "tl-" so they never
       collide with each page's existing inline class names.
     - No build step. Pure CSS, CSS custom properties only.
     - NO em-dashes anywhere in this file (corporate rule). Use a hyphen.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   FONTS  (full migration, owner-approved)
   ---------------------------------------------------------------------------
   Three Google Font families, all Turkish-glyph-capable. Turkish-specific
   glyphs (Ihaps): Inverted-dotless I, dotless i, s-cedilla, g-breve, o-umlaut,
   c-cedilla, u-umlaut and capital C-cedilla -> rendered below for reference:
       I-stack: Iı  (capital dotted I + dotless i)
       sgocu:   ş ğ ö ç ü
       upper:   Ç
   These three families ship the full Latin Extended-A set that covers Turkish.
   Render must be eyeball-verified on each page, but coverage is present.
   --------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Hanken+Grotesk:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* Font stacks */
  --font-display: 'Spectral', Georgia, serif;
  --font-body: 'Hanken Grotesk', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* -------------------------------------------------------------------------
     COLORS  (light, default)
     ------------------------------------------------------------------------- */
  --navy: #1C2B45;
  --navy-light: #2A3D5F;
  --navy-dark: #141F33;
  --cream: #F7F4F0;

  --gold-decor: #B8956A;   /* decorative ONLY: surfaces, icons, borders, large display headings. NEVER body text. */
  --gold-text: #7A5A34;    /* accessible gold for TEXT/links, AA 4.8:1 on cream/white, use >=14px. */
  --gold-light: #D4B48C;
  --gold-dark: #9A7A54;

  /* Risk / severity */
  --risk-critical: #C0392B;
  --risk-high: #E67E22;
  --risk-medium: #F39C12;
  --risk-low: #27AE60;

  /* Text */
  --text: #3A3A3A;
  --text-secondary: #5A5A5A;
  --text-muted: #8A8A85;

  /* Surfaces / borders */
  --surface: #FFFFFF;
  --surface-alt: #FBFAF7;
  --border: #E7E2DB;
  --border-2: #E2DBD0;

  /* Success */
  --success: #27AE60;
  --success-text: #1F8A5B;

  /* Theme-resolving tokens (defined in BOTH themes so refs never break) */
  --heading: #1C2B45;       /* headings on light */
  --night-paper: #D8CBB0;   /* dark-mode legal/redline bubble bg; defined here so light refs resolve too */

  /* -------------------------------------------------------------------------
     SPACING / RADIUS / ELEVATION
     ------------------------------------------------------------------------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-12: 48px;
  --sp-16: 64px;

  --radius-1: 7px;
  --radius-2: 11px;
  --radius-3: 14px;
  --radius-4: 20px;
  --radius-pill: 999px;

  --elev-1: 0 1px 2px rgba(28, 43, 69, .05);
  --elev-2: 0 4px 12px rgba(28, 43, 69, .08);
  --elev-3: 0 14px 30px rgba(28, 43, 69, .12);
  --elev-card: 0 1px 2px rgba(28, 43, 69, .04), 0 12px 30px rgba(28, 43, 69, .06);
  --shadow-gold: 0 6px 16px rgba(184, 149, 106, .3);

  /* -------------------------------------------------------------------------
     MOTION
     ------------------------------------------------------------------------- */
  --dur-1: 120ms;   /* hover / chip / tone */
  --dur-2: 200ms;   /* panel / sheet / modal */
  --dur-3: 320ms;   /* reasoning / page */
  --ease-premium: cubic-bezier(.2, .8, .2, 1);
}

/* ---------------------------------------------------------------------------
   DARK MODE  (semantic - "Night Vision" section 8)
   ---------------------------------------------------------------------------
   Activated by [data-theme="dark"] on a root element. Surfaces map to a deep
   navy ground; the night-paper token keeps legal/redline bubbles readable
   (navy text on it stays >7:1, no glare).
   --------------------------------------------------------------------------- */
[data-theme="dark"] {
  --surface-ground: #0F1923;   /* page ground */

  --navy: #0F1923;
  --surface: #1A2A3E;
  --surface-alt: #16233A;
  --border: #243246;
  --border-2: #2A3548;

  --heading: #E0C9A8;          /* headings on dark */
  --text: #E8E4DF;
  --text-secondary: #9FB0C8;
  --text-muted: #7E8CA0;

  --gold-decor: #D4B48C;
  --gold-text: #D4B48C;

  --night-paper: #D8CBB0;      /* dark-mode legal/redline bubble background */
}

/* ===========================================================================
   BASE COMPONENT CLASSES  (opt-in, "tl-" prefixed)
   ---------------------------------------------------------------------------
   Apply these in later workstreams WITHOUT colliding with a page's existing
   class names. All metrics are token-driven so themes flow through.
   =========================================================================== */

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.tl-btn-gold {
  background: var(--gold-decor);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  padding: 12px 22px;
  border: none;
  border-radius: var(--radius-2);
  box-shadow: var(--shadow-gold);
  cursor: pointer;
  transition: var(--dur-1) var(--ease-premium);
}
.tl-btn-gold:hover { background: #A6855C; }

.tl-btn-navy {
  background: var(--navy);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  padding: 12px 22px;
  border: none;
  border-radius: var(--radius-2);
  cursor: pointer;
  transition: var(--dur-1) var(--ease-premium);
}
.tl-btn-navy:hover { background: var(--navy-light); }

.tl-btn-ghost {
  background: var(--surface);
  color: var(--navy);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  padding: 12px 22px;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-2);
  cursor: pointer;
  transition: var(--dur-1) var(--ease-premium);
}
.tl-btn-ghost:hover { border-color: var(--gold-decor); }

.tl-btn-danger {
  background: var(--surface);
  color: var(--risk-critical);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  padding: 12px 22px;
  border: 1px solid #EBCDC8;
  border-radius: var(--radius-2);
  cursor: pointer;
  transition: var(--dur-1) var(--ease-premium);
}
.tl-btn-danger:hover { background: #FBEFED; }

/* ── Chips ───────────────────────────────────────────────────────────────── */
.tl-chip {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--gold-dark);
  background: #FBF7F0;
  border: 1px solid #ECE0CE;
  padding: 7px 13px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: var(--dur-1) var(--ease-premium);
}
.tl-chip.is-active {
  color: #fff;
  background: var(--gold-decor);
}

/* ── Risk pills ──────────────────────────────────────────────────────────── */
.tl-risk-pill {
  font-weight: 700;
  font-size: 12px;
  color: #fff;
  padding: 5px 13px;
  border-radius: var(--radius-1);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.tl-risk-pill.is-critical { background: var(--risk-critical); }
.tl-risk-pill.is-high { background: var(--risk-high); }
.tl-risk-pill.is-medium { background: var(--risk-medium); }
.tl-risk-pill.is-low { background: var(--risk-low); }

/* ── Language toggle (TR/EN switch look) ─────────────────────────────────────
   NOTE: i18n.js auto-relabels any element that ALSO carries the class
   "lang-toggle-i18n". This class styles the look; that class wires behaviour.
   min 44x44 target = accessible tap area.
   --------------------------------------------------------------------------- */
.tl-lang-toggle {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--gold-text);
  background: var(--surface);
  border: 1px solid var(--border-2);
  padding: 8px 12px;
  border-radius: var(--radius-1);
  min-height: 44px;
  min-width: 44px;
  cursor: pointer;
  transition: var(--dur-1);
}
.tl-lang-toggle:hover { border-color: var(--gold-decor); }

/* ── Glass surfaces ──────────────────────────────────────────────────────────
   tl-glass is DECORATIVE (translucent). For legal text readability use
   tl-glass-solid (near-opaque). Opaque fallback where backdrop-filter is absent.
   --------------------------------------------------------------------------- */
.tl-glass {
  background: rgba(255, 255, 255, .72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, .5);
}
@supports not (backdrop-filter: blur(1px)) {
  .tl-glass { background: var(--surface); }
}
.tl-glass-solid {
  background: var(--surface);
}

/* ── Focus ring (accessible, additive) ───────────────────────────────────────
   Two-layer ring (surface gap + gold halo) on keyboard focus only. Kept
   additive so it does not aggressively fight a page's existing focus styles.
   --------------------------------------------------------------------------- */
.tl-focusable:focus-visible,
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--gold-decor);
}

/* ---------------------------------------------------------------------------
   REDUCED MOTION  (accessibility - honor OS setting)
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===========================================================================
   OMNILEGAL skin (white-label) - fontlar + near-black koyu-tema. (skin INC-2)
   ADDITIVE + GRANDFATHER: yalniz [data-brand-font="clash"] / [data-brand="omnilegal"]
   kapsaminda etki eder; default (topluyildiz) BIREBIR korunur. @font-face'ler
   omnipotentlegal.ai DERLENMIS CSS'inden BIREBIR (yol /fonts/ -> /assets/fonts/).
   =========================================================================== */
@font-face{font-family:Clash Display;src:url(/assets/fonts/fs-1.woff2) format("woff2");font-weight:400;font-display:swap;font-style:normal}
@font-face{font-family:Clash Display;src:url(/assets/fonts/fs-2.woff2) format("woff2");font-weight:500;font-display:swap;font-style:normal}
@font-face{font-family:Clash Display;src:url(/assets/fonts/fs-3.woff2) format("woff2");font-weight:600;font-display:swap;font-style:normal}
@font-face{font-family:Clash Display;src:url(/assets/fonts/fs-4.woff2) format("woff2");font-weight:700;font-display:swap;font-style:normal}
@font-face{font-family:Zodiak;src:url(/assets/fonts/fs-5.woff2) format("woff2");font-weight:400;font-display:swap;font-style:normal}
@font-face{font-family:Zodiak;src:url(/assets/fonts/fs-6.woff2) format("woff2");font-weight:700;font-display:swap;font-style:normal}
@font-face{font-family:General Sans;src:url(/assets/fonts/fs-7.woff2) format("woff2");font-weight:400;font-display:swap;font-style:normal}
@font-face{font-family:General Sans;src:url(/assets/fonts/fs-8.woff2) format("woff2");font-weight:500;font-display:swap;font-style:normal}
@font-face{font-family:General Sans;src:url(/assets/fonts/fs-9.woff2) format("woff2");font-weight:600;font-display:swap;font-style:normal}
@font-face{font-family:Geist Mono;font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/gm-101.woff2) format("woff2");unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:Geist Mono;font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/gm-102.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Geist Mono;font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/gm-103.woff2) format("woff2");unicode-range:U+2000-2001,U+2004-2008,U+200A,U+23B8-23BD,U+2500-259F}
@font-face{font-family:Geist Mono;font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/gm-104.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:Geist Mono;font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/gm-105.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Geist Mono;font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/gm-106.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Geist Mono;font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/gm-105.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Geist Mono;font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/gm-106.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Zodiak Fallback;src:local("Georgia");size-adjust:94%;ascent-override:90%;descent-override:22%}
@font-face{font-family:General Sans Fallback;src:local("Arial");size-adjust:107%}
@font-face{font-family:Clash Display Fallback;src:local("Arial");size-adjust:100%}

/* OMNILEGAL font-stack swap - yalniz data-brand-font="clash" (default Spectral DEGISMEZ).
   html[...] specificity (0,1,1) sayfa-ici :root (0,1,0) font yeniden-tanimini yener. */
html[data-brand-font="clash"] {
  --font-display: 'Clash Display', 'Clash Display Fallback', Georgia, serif;
  --font-serif: 'Zodiak', 'Zodiak Fallback', Georgia, serif;
  --font-body: 'General Sans', 'General Sans Fallback', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, monospace;
}

/* OMNILEGAL near-black koyu-tema - yalniz [data-theme=dark][data-brand=omnilegal].
   Default [data-theme=dark] (navy) override EDILMEZ; override etmedigim token'lar
   (night-paper vb.) default-dark'tan miras alinir. WCAG: gold-text=#C9A876 (AAA).
   html[...] specificity (0,2,1) sayfa-ici :root + [data-theme=dark] token override'ini yener. */
html[data-theme="dark"][data-brand="omnilegal"] {
  --surface-ground: #0B0B0C;   /* obsidian */
  --navy: #0B0B0C;
  --navy-light: #141416;       /* navy ailesi -> near-black (sayfa-ozel bg'ler obsidian olur) */
  --navy-dark: #08080A;        /* void (en derin) */
  --surface: #141416;          /* raise-1 */
  --surface-alt: #1B1B1E;      /* raise-2 */
  /* index.html page-local surface var'lari (sat ~103-117) -> obsidian. body=var(--cream),
     kart/modal=var(--white). Yalniz omnilegal scope; topluyildiz [data-theme=dark] BIREBIR. */
  --cream: #0B0B0C;            /* gövde zemini obsidian (navy #1A1F2E DEGIL) */
  --white: #141416;            /* kart/modal koyu yuzey (raise-1) */
  --brand-light: #0B0B0C;      /* .chat-area ana kaydirma zemini obsidian (navy #151B28 DEGIL) */
  --brand-border: rgba(184,149,106,0.14);  /* kart/ayrac kenari gold hairline (navy #2A3548 DEGIL) */
  --border: rgba(184,149,106,0.14);    /* gold hairline (opak-mavi degil) */
  --border-2: rgba(184,149,106,0.22);
  --heading: #EDE8E0;          /* ivory (gold DEGIL) */
  --text: #EDE8E0;
  --text-secondary: #9A968E;   /* ivory-muted */
  --text-muted: #8C887E;       /* ivory-faint */
  --gold-decor: #B8956A;       /* dekoratif aksan */
  --gold-text: #C9A876;        /* AA/AAA gold metin near-black uzerinde */
  /* === handoff token tamamlama (INC-6 component-reskin; 02-TASARIM-TOKENLARI) === */
  --void: #08080A; --obsidian: #0B0B0C; --raised: #141416;   /* semantik alias (markup tasima kolayligi) */
  --panel: rgba(13,13,14,.6);                                /* yari-saydam kart zemini */
  --gold-light: #D4B48C; --gold-dark: #9A7A54;
  --gold-spark: #F5E6C8; --gold-spark-hi: #FFF4D8;
  --ramp-1: #E3C894; --ramp-2: #CDAE80; --ramp-3: #C9A876; --ramp-4: #B8956A; --ramp-5: #9A7A54;
  --steel-blue: #5C7A8C;
  --text-faint: #6F6C65;                                     /* en-soluk mono etiket (02 ref) */
  --risk-critical: #C0392B; --risk-critical-soft: #E08A7E;
  --risk-high: #E67E22;     --risk-high-soft: #E0A070;
  --risk-medium: #F39C12;   --risk-medium-soft: #E6C06A;
  --risk-low: #6FAE7E;      --risk-low-soft: #7BBF90;
  --glass-bg: rgba(20,20,22,.7); --glass-bg-strong: rgba(20,20,22,.8); --glass-bg-soft: rgba(20,20,22,.55);
  --hairline: rgba(184,149,106,.18);
  --grain-opacity: .04;
}

/* ===== OMNILEGAL ORTAK YARDIMCI-KATMAN (INC-6; default no-op, dark+omnilegal scope) =====
   BLOKER-fix: TUM bilesen kurallari [data-theme="dark"][data-brand="omnilegal"] scope.
   brand-boot.js omnilegal'i daima data-theme=dark'a kilitler -> light-zeminde kirilma YOK.
   Default topluyildiz: data-brand yok -> 0 eslesme (grandfather, BIREBIR). */
html[data-theme="dark"][data-brand="omnilegal"] #themeToggle { display: none !important; } /* dark-only: tema-toggle gizle */
html[data-theme="dark"][data-brand="omnilegal"] .tl-glass {
  background: var(--glass-bg); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid var(--hairline);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html[data-theme="dark"][data-brand="omnilegal"] .tl-glass { background: var(--raised); }
}
html[data-theme="dark"][data-brand="omnilegal"] .tl-data-panel {
  background: var(--panel); border: 1px solid var(--hairline); border-radius: 11px;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
/* Risk-rozet utility (chat tablo + ileride dashboard paylasir) */
html[data-theme="dark"][data-brand="omnilegal"] .ol-risk { font-family: var(--font-mono); font-size: 8.5px; font-weight: 700; letter-spacing: .08em; padding: 2px 7px; border-radius: 4px; text-transform: uppercase; }
html[data-theme="dark"][data-brand="omnilegal"] .ol-risk.crit { background: rgba(192,57,43,.14); color: var(--risk-critical-soft); }
html[data-theme="dark"][data-brand="omnilegal"] .ol-risk.high { background: rgba(230,126,34,.14); color: var(--risk-high-soft); }
html[data-theme="dark"][data-brand="omnilegal"] .ol-risk.med  { background: rgba(243,156,18,.14); color: var(--risk-medium-soft); }
html[data-theme="dark"][data-brand="omnilegal"] .ol-risk.low  { background: rgba(111,174,126,.14); color: var(--risk-low-soft); }
/* Film-grain sinematik katman (02: SVG fractalNoise, soft-light) */
html[data-theme="dark"][data-brand="omnilegal"] .ol-grain {
  position: fixed; inset: -140px; z-index: 60; pointer-events: none; opacity: var(--grain-opacity); mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
}
html[data-theme="dark"][data-brand="omnilegal"] ::-webkit-scrollbar { width: 7px; height: 7px; }
html[data-theme="dark"][data-brand="omnilegal"] ::-webkit-scrollbar-thumb { background: rgba(184,149,106,.22); border-radius: 7px; }
html[data-theme="dark"][data-brand="omnilegal"] ::-webkit-scrollbar-track { background: transparent; }