/* ============================================================
   TOP NOTCH TRANSLOC — DESIGN TOKENS
   Colors & Typography

   Ported verbatim from docs/design/tn_handoff/_ds/colors_and_type.css
   (the canonical token source), MINUS its Google Fonts @import — this
   app is CDN-free; the same families/weights are self-hosted via
   fonts.css (linked before this file in base.html). Do not hand-edit
   the ported block below without also updating the design-system
   source, so the two stay in sync.
   ============================================================ */

:root {
  /* ============================================================
     COLOR — RAW PALETTE (lifted from logo)
     ============================================================ */
  --tn-ink:           #1C1B18;   /* logo body — near-black, warm */
  --tn-ink-soft:      #2A2925;
  --tn-steel:         #4F7089;   /* logo right wing — steel blue */
  --tn-steel-deep:    #2E4A60;   /* darker steel for headlines */
  --tn-sky:           #93C6DA;   /* logo left wing — sky blue */
  --tn-sky-soft:      #C5DDE7;
  --tn-sky-tint:      #EAF2F6;   /* large tinted areas */

  /* Warm neutrals — paper / document feel */
  --tn-paper:         #FAF7F1;   /* primary off-white background */
  --tn-paper-deep:    #F2EDE3;   /* sectioning */
  --tn-sand:          #E8DFD0;   /* accent neutral */
  --tn-sand-soft:     #F5EFE3;
  --tn-bone:          #FBFAF6;

  /* Grays (warm) */
  --tn-gray-100:      #EFEDE7;
  --tn-gray-200:      #DCD9D1;
  --tn-gray-300:      #C2BEB4;
  --tn-gray-400:      #918C82;
  --tn-gray-500:      #6E6A60;
  --tn-gray-600:      #4D4A44;
  --tn-gray-700:      #34322E;

  /* Pure white for chrome */
  --tn-white:         #FFFFFF;

  /* Accents */
  --tn-gold:          #B8924A;   /* certified / seal accent */
  --tn-gold-soft:     #E9D9B5;
  --tn-success:       #3F7A55;
  --tn-warning:       #B36A1F;
  --tn-error:         #B23A2E;

  /* ============================================================
     COLOR — SEMANTIC TOKENS (use these in components)
     ============================================================ */
  --bg:               var(--tn-paper);
  --bg-elevated:      var(--tn-white);
  --bg-sunken:        var(--tn-paper-deep);
  --bg-inverse:       var(--tn-ink);
  --bg-accent:        var(--tn-steel-deep);
  --bg-tint:          var(--tn-sky-tint);

  --fg-1:             var(--tn-ink);          /* primary text */
  --fg-2:             var(--tn-gray-600);     /* secondary text */
  --fg-3:             var(--tn-gray-400);     /* tertiary / meta */
  --fg-inverse:       var(--tn-paper);
  --fg-accent:        var(--tn-steel-deep);
  --fg-on-accent:     var(--tn-paper);

  --border:           var(--tn-gray-200);
  --border-strong:    var(--tn-gray-300);
  --border-ink:       var(--tn-ink);
  --rule:             var(--tn-gray-200);

  --link:             var(--tn-steel-deep);
  --link-hover:       var(--tn-ink);

  /* ============================================================
     SPACING — 4px base (compact, document-style)
     ============================================================ */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* ============================================================
     RADII — minimal (documents don't have rounded corners)
     ============================================================ */
  --radius-none: 0;
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   8px;
  --radius-pill: 999px;

  /* ============================================================
     SHADOWS — soft, paper-on-paper
     ============================================================ */
  --shadow-xs: 0 1px 0 rgba(28, 27, 24, 0.04), 0 1px 2px rgba(28, 27, 24, 0.04);
  --shadow-sm: 0 1px 2px rgba(28, 27, 24, 0.06), 0 2px 4px rgba(28, 27, 24, 0.04);
  --shadow-md: 0 4px 12px rgba(28, 27, 24, 0.06), 0 1px 3px rgba(28, 27, 24, 0.04);
  --shadow-lg: 0 12px 32px rgba(28, 27, 24, 0.08), 0 4px 8px rgba(28, 27, 24, 0.04);
  --shadow-inner: inset 0 1px 2px rgba(28, 27, 24, 0.05);

  /* ============================================================
     TYPOGRAPHY — Families
     ============================================================ */
  --font-display:  "Spectral", "Times New Roman", Georgia, serif;
  --font-sans:     "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:     "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-arabic-display: "Amiri", "Traditional Arabic", serif;
  --font-arabic:   "IBM Plex Sans Arabic", "Tajawal", system-ui, sans-serif;

  /* Font weights */
  --weight-light:     300;
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;

  /* Type scale — modular, editorial */
  --text-xs:    12px;   /* meta, captions */
  --text-sm:    14px;   /* secondary UI */
  --text-base:  16px;   /* body */
  --text-md:    18px;   /* body large */
  --text-lg:    22px;   /* h5 */
  --text-xl:    28px;   /* h4 */
  --text-2xl:   36px;   /* h3 */
  --text-3xl:   48px;   /* h2 */
  --text-4xl:   64px;   /* h1 */
  --text-5xl:   88px;   /* display */
  --text-6xl:   120px;  /* hero display */

  /* Line heights */
  --leading-tight:   1.08;
  --leading-snug:    1.2;
  --leading-normal:  1.45;
  --leading-relaxed: 1.6;
  --leading-body:    1.65;

  /* Letter spacing */
  --tracking-tight:  -0.02em;
  --tracking-snug:   -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-wider:  0.12em;     /* small caps */
  --tracking-eyebrow: 0.18em;    /* eyebrow labels */

  /* ============================================================
     LAYOUT
     ============================================================ */
  --container-max:   1280px;
  --container-wide:  1440px;
  --container-text:  720px;
  --gutter:          var(--space-6);

  /* ============================================================
     MOTION
     ============================================================ */
  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-soft:   cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:    140ms;
  --dur-base:    240ms;
  --dur-slow:    400ms;
  --dur-page:    600ms;
}

/* ============================================================
   SEMANTIC TYPE STYLES
   Use as class names or @extend equivalents.
   ============================================================ */
.tn-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-2);
}

.tn-display {
  font-family: var(--font-display);
  font-size: var(--text-6xl);
  font-weight: var(--weight-regular);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

.tn-h1 {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: var(--weight-regular);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

.tn-h2 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-regular);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg-1);
}

.tn-h3 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-regular);
  line-height: var(--leading-snug);
  color: var(--fg-1);
}

.tn-h4 {
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg-1);
}

.tn-h5 {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--fg-1);
}

.tn-lead {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: var(--weight-regular);
  line-height: var(--leading-body);
  color: var(--fg-2);
}

.tn-body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-body);
  color: var(--fg-1);
}

.tn-body-sm {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--fg-2);
}

.tn-meta {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  color: var(--fg-3);
}

.tn-mono {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0;
}

.tn-quote {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-style: italic;
  font-weight: var(--weight-regular);
  line-height: 1.35;
  color: var(--fg-1);
}

/* Arabic semantic styles */
.tn-arabic-display {
  font-family: var(--font-arabic-display);
  font-size: var(--text-4xl);
  font-weight: var(--weight-regular);
  line-height: 1.5;
  direction: rtl;
}

.tn-arabic-body {
  font-family: var(--font-arabic);
  font-size: var(--text-md);
  line-height: 1.85;
  direction: rtl;
}

/* Small caps utility — used for eyebrow micro-labels */
.tn-caps {
  font-variant: all-small-caps;
  letter-spacing: var(--tracking-wider);
}

/* Reset baseline for documents */
html { color: var(--fg-1); background: var(--bg); }
body { font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--leading-body); }

/* ============================================================
   DARK MODE — ink-based override
   Toggled by the existing JS theme toggle, which adds class
   "dark" to <html> (see _layout.html). Only the SEMANTIC layer is
   remapped here (bg/fg/border/rule/link/shadow) — the raw --tn-*
   brand palette (ink, steel, sky, gold, success/warning/error)
   stays IDENTICAL in both themes, exactly as it does across the
   frames (the sidebar, for instance, is --tn-ink in every frame
   regardless of theme). Anything in app.css that should flip with
   the theme must reference a semantic token, not a raw --tn-* one.
   ============================================================ */
html.dark {
  --bg:               #1C1B18;
  --bg-elevated:      #2A2925;
  --bg-sunken:        #161512;
  --bg-inverse:       var(--tn-paper);
  --bg-accent:        var(--tn-steel-deep);
  --bg-tint:          rgba(147, 198, 218, 0.12);   /* sky wash over dark */

  --fg-1:             var(--tn-paper);              /* primary text → paper */
  --fg-2:             rgba(250, 247, 241, 0.72);     /* secondary text */
  --fg-3:             rgba(250, 247, 241, 0.50);     /* tertiary / meta */
  --fg-inverse:       var(--tn-ink);
  --fg-accent:        var(--tn-sky);                /* brightened for contrast on ink */
  --fg-on-accent:     var(--tn-paper);

  --border:           rgba(255, 255, 255, 0.10);
  --border-strong:    rgba(255, 255, 255, 0.16);
  --border-ink:       rgba(255, 255, 255, 0.7);
  --rule:             rgba(255, 255, 255, 0.10);

  --link:             var(--tn-sky);
  --link-hover:       var(--tn-paper);

  /* Shadows go near-none — a dark-on-dark drop shadow doesn't read;
     depth instead comes mostly from the border/rule hairlines above. */
  --shadow-xs: 0 1px 0 rgba(0, 0, 0, 0.20);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.28);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.32);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.40);
  --shadow-inner: inset 0 1px 2px rgba(0, 0, 0, 0.30);
}

/* ============================================================
   APP-SIDE COMPAT ALIASES — additions BELOW the ported block
   (not part of the design-system source above; safe to hand-edit).

   UI audit 2026-07-28, D-11: library/_results.html's snippet
   blockquote styles with var(--accent, #888) and
   var(--bg-2, rgba(128,128,128,.07)), but neither variable was
   ever defined in any stylesheet — the Library search snippet
   silently fell back to hardcoded grays in BOTH themes.  Alias
   them to the intended semantic tokens.  var() indirection
   resolves per element at computed-value time, so the html.dark
   overrides of --fg-accent / --bg-tint above flip these two
   automatically — no separate dark-mode pair is needed.
   ============================================================ */
:root {
  --accent: var(--fg-accent);
  --bg-2:   var(--bg-tint);
}