/* spa-audit design tokens
 * Source of truth for the palette, type scale and spacing described in
 * specs/04-ui.md section 8. Import first, before any view stylesheet.
 *
 * Rules encoded here (do not "improve" them without reading section 4.3):
 *   - No green and no red in the confidence scale. Red (--fault) means the
 *     RECORDER is broken, never that a person did something.
 *   - Confidence is always encoded four ways: glyph + word + hue + border style.
 *     These variables supply two of the four. The markup must supply the other two.
 *   - Heat ramps are single-hue lightness ramps. No rainbow, no green-to-red.
 */

:root {
  color-scheme: light dark;

  /* ---- surfaces and ink (light) ---- */
  --bg:            #F7F6F3;
  --surface:       #FFFFFF;
  --surface-2:     #F1EFEA;
  --border:        #E3DFD8;
  --border-strong: #CFC9BF;
  --ink:           #1B1F1D;   /* 13.6:1 on --bg */
  --ink-2:         #565F5A;   /*  6.1:1 */
  --ink-3:         #7E8783;   /*  4.6:1 */

  /* ---- interactive ---- */
  --accent:        #0E6F6A;
  --accent-hover:  #0B5A56;
  --accent-soft:   #E3F1F0;

  /* ---- confidence tiers (see 04-ui.md 4.3) ---- */
  --record:        #3B4A6B;   /* tier A  glyph ●  word "Record"    border solid  */
  --record-soft:   #E8ECF5;
  --measured:      #0E6F6A;   /* tier B  glyph ◕  word "Measured"  border solid  */
  --measured-soft: #E3F1F0;
  --probable:      #8A5A10;   /* tier C  glyph ◑  word "Probable"  border dashed */
  --probable-soft: #FBF0DC;
  --unclear:       #6E7570;   /* tier D  glyph ○  word "Unclear"   border dashed 60% */
  --unclear-soft:  #EFEEEB;

  /* ---- system fault ONLY. never used for a person-related item ---- */
  --fault:         #9E3320;
  --fault-soft:    #F8E7E2;

  /* ---- heat lanes ---- */
  --motion:        var(--measured);
  --voice:         #5B62A8;
  --gap-hatch:     rgba(126, 135, 131, .18);   /* coverage gap, 45deg hatch */

  /* ---- type ---- */
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
             "Noto Sans", "Noto Sans Arabic", "Noto Naskh Arabic", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", Menlo, monospace;

  --fs-xs:   12px;  --lh-xs:   16px;
  --fs-sm:   13px;  --lh-sm:   18px;
  --fs-base: 15px;  --lh-base: 22px;
  --fs-md:   17px;  --lh-md:   24px;
  --fs-lg:   21px;  --lh-lg:   28px;
  --fs-xl:   27px;  --lh-xl:   32px;
  --fs-2xl:  34px;  --lh-2xl:  40px;

  /* ---- space, 4-based. nothing outside this scale ---- */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;

  /* ---- shape ---- */
  --r-ctl: 6px; --r-card: 10px; --r-chip: 999px; --r-media: 4px;
  --hairline: 1px;

  /* ---- elevation: exactly one shadow, popovers and hover preview only ---- */
  --shadow-pop: 0 6px 20px rgba(20, 24, 22, .12);

  /* ---- layout ---- */
  --w-content: 1440px;
  --w-card:     980px;
  --w-rail:     380px;
  --h-header:    56px;
  --h-tabbar:    56px;
  --tap:         44px;

  /* ---- motion: colour and opacity only. the scrubber never animates ---- */
  --t-fast: 120ms;
  --ease: cubic-bezier(.2, .6, .3, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:            #16181B;
    --surface:       #1D2124;
    --surface-2:     #252A2D;
    --border:        #31373A;
    --border-strong: #464D51;
    --ink:           #E9EBE8;
    --ink-2:         #AFB6B2;
    --ink-3:         #868D89;

    --accent:        #4FBDB4;
    --accent-hover:  #6FD2C9;
    --accent-soft:   #123A38;

    --record:        #9AACD8;
    --record-soft:   #1C2334;
    --measured:      #4FBDB4;
    --measured-soft: #10312F;
    --probable:      #E0B466;
    --probable-soft: #33280F;
    --unclear:       #99A19D;
    --unclear-soft:  #252A2D;

    --fault:         #E8836B;
    --fault-soft:    #33170F;

    --voice:         #8E95DE;
    --gap-hatch:     rgba(134, 141, 137, .22);

    --shadow-pop: 0 6px 20px rgba(0, 0, 0, .45);
  }
}

:root[data-theme="dark"] {
  --bg:            #16181B;
  --surface:       #1D2124;
  --surface-2:     #252A2D;
  --border:        #31373A;
  --border-strong: #464D51;
  --ink:           #E9EBE8;
  --ink-2:         #AFB6B2;
  --ink-3:         #868D89;

  --accent:        #4FBDB4;
  --accent-hover:  #6FD2C9;
  --accent-soft:   #123A38;

  --record:        #9AACD8;
  --record-soft:   #1C2334;
  --measured:      #4FBDB4;
  --measured-soft: #10312F;
  --probable:      #E0B466;
  --probable-soft: #33280F;
  --unclear:       #99A19D;
  --unclear-soft:  #252A2D;

  --fault:         #E8836B;
  --fault-soft:    #33170F;

  --voice:         #8E95DE;
  --gap-hatch:     rgba(134, 141, 137, .22);

  --shadow-pop: 0 6px 20px rgba(0, 0, 0, .45);
}

/* ---------- base ---------- */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: var(--fs-base) / var(--lh-base) var(--font-ui);
  -webkit-text-size-adjust: 100%;
}

/* every number that sits in a column of numbers */
time, .num, .dur, .price, .count, td.num { font-variant-numeric: tabular-nums; }

/* transcript segments: Arabic must render RTL inside an LTR page */
.seg-text { unicode-bidi: plaintext; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-ctl);
}

button, [role="button"], a { min-height: var(--tap); }

/* ---------- confidence chip ---------- */

.conf {
  display: inline-flex; align-items: center; gap: var(--s1);
  height: 22px; min-height: 22px; padding: 0 var(--s2) 0 6px;
  border-radius: var(--r-chip);
  font-size: var(--fs-xs); line-height: 1; font-weight: 600;
  border: var(--hairline) solid currentColor;
  background: var(--tier-soft); color: var(--tier);
}
.conf .glyph { font-size: 13px; }

.t-record   { --tier: var(--record);   --tier-soft: var(--record-soft); }
.t-measured { --tier: var(--measured); --tier-soft: var(--measured-soft); }
.t-probable { --tier: var(--probable); --tier-soft: var(--probable-soft); }
.t-unclear  { --tier: var(--unclear);  --tier-soft: var(--unclear-soft); }

/* tier C and D must LOOK weaker, not merely be labelled weaker */
.block.t-probable { border: 1px dashed var(--probable); border-left: 3px solid var(--probable); }
.block.t-unclear  { border: 1px dashed var(--unclear); opacity: .82; font-style: italic; }

/* any figure derived from tier C or D carries a trailing "?" (added in markup)
   and never uses the Record/Measured face */
.figure-uncertain { color: var(--probable); font-weight: 600; }

/* ---------- coverage gap hatch ---------- */

.gap {
  background-image: repeating-linear-gradient(
    45deg, var(--gap-hatch) 0 4px, transparent 4px 8px);
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}