/* ============================================================================
   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;
  }
}