/* Account Sniffer design tokens (Name Tag brand). Version: design/VERSION
   The only place colors, type, space, shape and motion are defined.
   Components and screens use the semantic roles below, never raw hex.
   Contrast ratios are WCAG 2 figures against the surface named;
   test/design.test.ts checks every text pair in both themes. */

:root {
  /* Brand palette (Name Tag, Oct 3 2026) */
  --as-plum: #3B2340;      /* ink, outlines, dark ground */
  --as-marigold: #E3A72F;  /* the name tag; plum text on it */
  --as-oat: #F3EEE6;       /* page ground */
  --as-lilac: #E6DEEA;     /* soft panels, avatar badges */
  --as-rose-clay: #C9776A; /* warm accent, shapes only (never text) */
  --as-heather-line: #B8AEC4; /* lines on paper in the hero scene */

  /* Semantic roles: light theme */
  --as-bg: var(--as-oat);
  --as-surface: #FBF9F5;
  --as-surface-sunk: #E9E2D7;
  --as-surface-inverse: var(--as-plum);
  --as-surface-soft: var(--as-lilac);
  --as-text: var(--as-plum);
  --as-text-muted: #655269;       /* 6.6:1 on oat */
  --as-text-inverse: var(--as-oat);
  --as-text-accent: #86560B;      /* links, accent text, 5.3:1 on oat */
  --as-line: #D8CFC2;             /* dividers, decorative */
  --as-line-strong: #85758A;      /* control edges, 3.9:1 on oat */
  --as-scent: var(--as-marigold); /* trail dots, tag edges; decorative only */
  --as-primary: var(--as-plum);
  --as-primary-hover: #54365A;
  --as-on-primary: var(--as-oat);
  --as-tag: var(--as-marigold);
  --as-on-tag: var(--as-plum);
  --as-focus: #86560B;
  --as-selected-bg: #ECE6EE;
  --as-info-bg: #FAEED3;
  --as-found: #3F6A35;
  --as-found-bg: #DFE8D6;
  --as-waiting: #7A5208;
  --as-waiting-bg: #F5E4BD;
  --as-blocked: #A33A2C;
  --as-blocked-bg: #F4DDD6;
  --as-avatar-bg: var(--as-oat);  /* behind dog art: stays oat in dark too */
  --as-art-bg: transparent;       /* behind full dog scenes */
  --as-logo-ink: var(--as-text);
  --as-shadow-ink: 20, 10, 20;    /* rgb triplet for shadows */
  /* Start screen hero scene */
  --as-scene-a: var(--as-lilac);  /* glow at the top */
  --as-scene-b: #F4DFAF;          /* warm ground at the bottom */
  --as-scene-ring: var(--as-plum);
  --as-scene-paper: #FBF9F5;
  --as-scene-line: var(--as-heather-line);

  /* Type */
  --as-font-display: "Young Serif", Georgia, "Times New Roman", serif;
  --as-font-body: "Instrument Sans", "Segoe UI", system-ui, Arial, sans-serif;
  --as-size-h1: clamp(2.125rem, 5vw, 3rem);   /* 34 to 48 */
  --as-size-h2: clamp(1.625rem, 3.4vw, 2rem); /* 26 to 32 */
  --as-size-h3: 1.375rem;   /* 22 */
  --as-size-h4: 1.125rem;   /* 18, sans semibold */
  --as-size-body-lg: 1.25rem;
  --as-size-body: 1.125rem; /* 18: the audience skews older */
  --as-size-small: 1rem;
  --as-size-label: 0.875rem;
  --as-size-caption: 0.8125rem;
  --as-size-code: 2.25rem;  /* invite codes */
  --as-lh-tight: 1.18;
  --as-lh-snug: 1.3;
  --as-lh-body: 1.56;
  --as-measure: 65ch;
  /* Print: sizes for paper */
  --as-size-print-h1: 18pt;
  --as-size-print-h2: 13pt;
  --as-size-print: 10.5pt;
  --as-size-print-small: 8.5pt;

  /* Space: 8px base with a 4px half step */
  --as-space-1: 4px;
  --as-space-2: 8px;
  --as-space-3: 12px;
  --as-space-4: 16px;
  --as-space-5: 24px;
  --as-space-6: 32px;
  --as-space-7: 48px;
  --as-space-8: 64px;
  --as-space-9: 96px;

  /* Shape */
  --as-radius-sm: 8px;
  --as-radius: 12px;
  --as-radius-lg: 20px;
  --as-radius-xl: 28px;
  --as-radius-pill: 999px;
  --as-radius-tag: 8px 999px 999px 8px;  /* the name tag shape */
  --as-border: 1px;
  --as-border-control: 1.5px;

  /* Elevation: overlays only */
  --as-shadow-1: 0 1px 2px rgba(var(--as-shadow-ink), .08);
  --as-shadow-2: 0 8px 24px rgba(var(--as-shadow-ink), .14);
  --as-shadow-tag: 0 6px 16px rgba(var(--as-shadow-ink), .25);

  /* Controls */
  --as-target: 48px;       /* minimum touch target */
  --as-target-lg: 56px;    /* big buttons on helper screens */
  --as-masthead-h: 0px;    /* height of the pinned masthead; the app sets it */
  --as-focus-ring: 0 0 0 3px var(--as-bg), 0 0 0 6px var(--as-focus);

  /* Motion */
  --as-ease: cubic-bezier(.3, .7, .3, 1);
  --as-ease-spring: cubic-bezier(.22, 1, .36, 1); /* arrives fast, settles soft: new screens, drops */
  --as-ease-pop: cubic-bezier(.34, 1.56, .64, 1);  /* a small overshoot: ticks and radio dots */
  --as-dur-fast: 120ms;
  --as-dur: 220ms;
  --as-dur-screen: 280ms;  /* a screen change */
  --as-dur-slow: 420ms;
  --as-dur-beat: 560ms;     /* the pause after a tapped answer before it moves on; a pause, not motion, so reduced motion keeps it (1.21.0) */
  --as-dur-calm: 560ms;     /* the calm settle between questions (1.21.0) */
  --as-dur-calm-gap: 160ms; /* the beat before the next question settles in */
  --as-ease-calm: cubic-bezier(.33, 0, .2, 1); /* soft in, soft out, never overshoots */
  --as-rise-calm: 10px;     /* how far the next question rises as it settles */
  --as-press: .97;         /* how far a pressed button sinks */
  --as-press-card: .985;   /* the same for a big tappable card */
  --as-shift: 16px;        /* how far a new screen slides in */
  --as-stagger: 60ms;      /* the gap between parts that arrive one after another */
  --as-rise: 6px;          /* how far an arriving part rises */
  --as-rise-in: 12px;      /* how far the front door's parts rise on the way in (1.20.0) */
  --as-dur-spin: 900ms;    /* one turn of the spinner */

  /* Layout widths (breakpoints in media queries: 480, 768, 1024) */
  --as-col: 480px;
  --as-page: 760px;        /* a screen's one column from 768px (AS-56) */
  --as-wide: 1120px;
  --as-aside: 360px;       /* the side column beside the words from 1024px */

  color-scheme: light;
}

/* Dark theme: plum ground. Marigold and oat both read on plum. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --as-bg: #24162B;
    --as-surface: var(--as-plum);
    --as-surface-sunk: #1A0F1F;
    --as-surface-inverse: var(--as-oat);
    --as-surface-soft: #3E2B45;
    --as-text: var(--as-oat);
    --as-text-muted: #D2C5D6;
    --as-text-inverse: var(--as-plum);
    --as-text-accent: var(--as-marigold);
    --as-line: #553C5C;
    --as-line-strong: #A08DA6;
    --as-primary: var(--as-oat);
    --as-primary-hover: #FFFFFF;
    --as-on-primary: var(--as-plum);
    --as-focus: var(--as-marigold);
    --as-selected-bg: #54365A;
    --as-info-bg: #433222;
    --as-found: #A9D39A;
    --as-found-bg: #2F3F27;
    --as-waiting: #F2CF85;
    --as-waiting-bg: #4A3714;
    --as-blocked: #F2B0A3;
    --as-blocked-bg: #4F2524;
    --as-art-bg: #EDE6F0;
    --as-shadow-ink: 0, 0, 0;
    --as-scene-a: #4A2F52;
    --as-scene-b: #2B1A31;
    --as-scene-ring: var(--as-oat);
    --as-scene-paper: var(--as-oat);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --as-bg: #24162B;
  --as-surface: var(--as-plum);
  --as-surface-sunk: #1A0F1F;
  --as-surface-inverse: var(--as-oat);
  --as-surface-soft: #3E2B45;
  --as-text: var(--as-oat);
  --as-text-muted: #D2C5D6;
  --as-text-inverse: var(--as-plum);
  --as-text-accent: var(--as-marigold);
  --as-line: #553C5C;
  --as-line-strong: #A08DA6;
  --as-primary: var(--as-oat);
  --as-primary-hover: #FFFFFF;
  --as-on-primary: var(--as-plum);
  --as-focus: var(--as-marigold);
  --as-selected-bg: #54365A;
  --as-info-bg: #433222;
  --as-found: #A9D39A;
  --as-found-bg: #2F3F27;
  --as-waiting: #F2CF85;
  --as-waiting-bg: #4A3714;
  --as-blocked: #F2B0A3;
  --as-blocked-bg: #4F2524;
  --as-art-bg: #EDE6F0;
  --as-shadow-ink: 0, 0, 0;
  --as-scene-a: #4A2F52;
  --as-scene-b: #2B1A31;
  --as-scene-ring: var(--as-oat);
  --as-scene-paper: var(--as-oat);
  color-scheme: dark;
}

/* Print: always the light theme, on white paper, whatever the screen shows. */
@media print {
  :root, :root:not([data-theme="light"]), :root[data-theme="dark"] {
    --as-bg: #FFFFFF;
    --as-surface: #FFFFFF;
    --as-surface-sunk: #E9E2D7;
    --as-surface-inverse: var(--as-plum);
    --as-surface-soft: var(--as-lilac);
    --as-text: var(--as-plum);
    --as-text-muted: #655269;
    --as-text-inverse: var(--as-oat);
    --as-text-accent: #86560B;
    --as-line: #D8CFC2;
    --as-line-strong: #85758A;
    --as-primary: var(--as-plum);
    --as-primary-hover: #54365A;
    --as-on-primary: var(--as-oat);
    --as-focus: #86560B;
    --as-selected-bg: #ECE6EE;
    --as-info-bg: #FAEED3;
    --as-found: #3F6A35;
    --as-found-bg: #DFE8D6;
    --as-waiting: #7A5208;
    --as-waiting-bg: #F5E4BD;
    --as-blocked: #A33A2C;
    --as-blocked-bg: #F4DDD6;
    --as-art-bg: transparent;
    --as-shadow-ink: 20, 10, 20;
    --as-scene-a: var(--as-lilac);
    --as-scene-b: #F4DFAF;
    --as-scene-ring: var(--as-plum);
    --as-scene-paper: #FBF9F5;
    color-scheme: light;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --as-dur-fast: 0ms; --as-dur: 0ms; --as-dur-screen: 0ms; --as-dur-slow: 0ms; --as-dur-calm: 0ms; --as-dur-calm-gap: 0ms; --as-rise-calm: 0px; --as-press: 1; --as-press-card: 1; --as-shift: 0px; --as-stagger: 0ms; --as-rise: 0px; --as-rise-in: 0px; --as-dur-spin: 0ms; }
}