/* ==========================================================================
   iSneps shared UI tokens - the one place a colour, a step or a duration
   is allowed to be a literal.
   --------------------------------------------------------------------------
   WHY THIS FILE EXISTS

   Before it, six surfaces hand-rolled three unrelated vocabularies: the
   landing page spoke --teal/--bg, the web app spoke --accent-gold (holding
   teal values, which is its own small lie), and every Mini App invented a
   private --xx-* set with Telegram fallbacks. Nothing linked them, so
   "matches the rest of the product" was a thing you could only check by eye
   - and an agent asked to add a page had no way to be right on purpose.

   The rule this file enforces is narrow and total: A SURFACE NEVER WRITES A
   COLOUR. It writes a role. Roles resolve per theme, themes resolve per
   origin or per user, and the surface is correct in all of them without
   knowing any of them exist.

   HOW TO ADOPT IT (incremental, no big-bang rewrite)

   Every name here is --ui-* so it collides with nothing already shipped.
   A surface adopts by REMAPPING its local names onto roles, one line each,
   and deleting the hex it used to hold:

       :root {
         --accent-gold: var(--ui-accent);
         --bg-primary:  var(--ui-surface);
       }

   That keeps every existing rule working untouched while moving the surface
   onto the shared system. Nothing has to be ported in one sitting.

   THREE LAYERS, IN ORDER. Do not skip a layer.

     1. PRIMITIVES  raw values with no meaning. Never referenced by a
                    component - only by layer 2.
     2. ROLES       what a component actually reaches for (surface, ink,
                    accent, line). Themed.
     3. THEMES      role values per theme. Selected with [data-theme].

   The checker (support/Testing/ui_ratchet.py) reads this file to learn what
   a legal token is, so adding a token here is what makes it usable
   elsewhere. See docs/design/anti-slop-ui-method.md for the method.
   ========================================================================== */

/* ==========================================================================
   LAYER 1 - PRIMITIVES
   Unthemed. A primitive is a fact about the design system's geometry, not
   about any particular screen.
   ========================================================================== */

:root {
  /* -- Type ---------------------------------------------------------------
     Two families and one optional display face. Inter is the only webfont
     the product loads; monospace is the "evidence" voice (badges, prompts,
     identifiers, anything the machine is quoting back at you) and uses the
     system stack so it costs nothing. */
  --ui-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ui-font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  /* Type scale. A 1.25 ratio off a 1rem base, plus two fluid display sizes.
     If a size you want is not on this list, the answer is one of these, not
     a new number. */
  --ui-text-xs: 0.75rem;
  --ui-text-sm: 0.875rem;
  --ui-text-base: 1rem;
  --ui-text-md: 1.125rem;
  --ui-text-lg: 1.25rem;
  --ui-text-xl: 1.5rem;
  --ui-text-2xl: 1.875rem;
  --ui-text-3xl: clamp(1.9rem, 4vw, 2.5rem);
  --ui-text-display: clamp(2.5rem, 6vw, 3.5rem);

  --ui-leading-tight: 1.2;
  --ui-leading-snug: 1.4;
  --ui-leading-normal: 1.65;

  --ui-tracking-tight: -0.02em;
  --ui-tracking-normal: 0;
  --ui-tracking-wide: 0.08em;

  --ui-weight-normal: 400;
  --ui-weight-medium: 500;
  --ui-weight-semibold: 600;

  /* -- Space --------------------------------------------------------------
     A 4px base scale. Every margin, padding and gap in the product is one
     of these. The checker flags any length that is not - that single rule
     is what kills the 13px/17px/23px drift that makes a page read as
     generated rather than designed. */
  --ui-space-0: 0;
  --ui-space-1: 4px;
  --ui-space-2: 8px;
  --ui-space-3: 12px;
  --ui-space-4: 16px;
  --ui-space-5: 24px;
  --ui-space-6: 32px;
  --ui-space-7: 48px;
  --ui-space-8: 64px;
  --ui-space-9: 96px;
  --ui-space-10: 128px;

  /* -- Radius ------------------------------------------------------------- */
  --ui-radius-sm: 4px;
  --ui-radius-md: 8px;
  --ui-radius-lg: 12px;
  --ui-radius-xl: 16px;
  --ui-radius-full: 9999px;

  /* -- Measure and width --------------------------------------------------
     Reading measure is a design constraint, not a preference: prose past
     ~75 characters loses the line. */
  --ui-measure: 44rem;
  --ui-width-wide: 980px;
  --ui-width-cap: 1100px;

  /* -- Motion -------------------------------------------------------------
     Three durations. Anything longer than --ui-motion-slow on a UI
     transition is decoration and needs a reason. */
  --ui-motion-fast: 150ms;
  --ui-motion-normal: 250ms;
  --ui-motion-slow: 400ms;
  --ui-ease: ease;
  --ui-ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* -- Elevation ----------------------------------------------------------
     Shadows are neutral black at every theme; only the GLOW is tinted, and
     it is tinted from the accent role so it follows the theme for free. */
  --ui-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
  --ui-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --ui-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);

  /* -- Layout constants --------------------------------------------------- */
  --ui-header-height: 80px;
  --ui-sidebar-width: 280px;
  --ui-input-height: 56px;

  /* -- Focus ring ---------------------------------------------------------
     One ring, everywhere, always visible. Never set outline:none without
     putting this back. */
  --ui-focus-ring: 0 0 0 3px rgba(var(--ui-accent-rgb), 0.4);
}

/* ==========================================================================
   LAYER 2 + 3 - ROLES, resolved per theme.

   The default (bare :root) is CURA: the public product's teal on near-black.
   A surface that never sets data-theme gets this and is correct.
   ========================================================================== */

:root,
[data-theme="cura"] {
  color-scheme: dark;

  /* Surfaces, in stacking order: the page, a card on it, a control inside
     the card, something lifted above it, and the hover state of any of them. */
  --ui-surface: #0a0f14;
  --ui-surface-raised: #111820;
  --ui-surface-sunken: #16202a;
  --ui-surface-elevated: #1a2733;
  --ui-surface-hover: #20303d;

  /* Ink. Three weights is the whole vocabulary; a fourth is always someone
     avoiding a layout decision. */
  --ui-ink: #e8eaed;
  --ui-ink-secondary: #9aa4ad;
  --ui-ink-muted: #64707a;
  --ui-ink-on-accent: #ffffff;
  --ui-ink-heading: #ffffff;

  /* Accent. ONE accent per theme. A second accent is a redesign, not a token. */
  --ui-accent: #0891b2;
  --ui-accent-rgb: 8, 145, 178;
  --ui-accent-bright: #06b6d4;
  --ui-accent-dim: #0e7490;
  --ui-accent-secondary: #5b7a95;
  --ui-accent-secondary-dim: #3f566b;

  /* Lines. Hairlines are neutral-on-dark; tinted lines carry the accent. */
  --ui-line: rgba(255, 255, 255, 0.10);
  --ui-line-strong: rgba(255, 255, 255, 0.25);
  --ui-line-subtle: rgba(8, 145, 178, 0.14);
  --ui-line-medium: rgba(8, 145, 178, 0.28);
  --ui-line-bright: rgba(8, 145, 178, 0.50);

  /* Translucent fills. Unlike --ui-surface-*, these sit ON whatever is behind
     them, so a chat bubble or a chip reads correctly on any surface without
     knowing which one it landed on. --ui-veil is the page surface at 85% for
     a sticky header over blurred content. */
  --ui-tint-raised: rgba(255, 255, 255, 0.06);
  --ui-tint-faint: rgba(255, 255, 255, 0.03);
  --ui-veil: rgba(10, 15, 20, 0.85);

  /* State. Semantic, never decorative - these three mean something happened. */
  --ui-ok: #7ee2b8;
  --ui-warn: #ffd27d;
  --ui-danger: #ff9a9a;

  --ui-glow: 0 0 20px rgba(8, 145, 178, 0.15);
  --ui-glow-strong: 0 0 30px rgba(8, 145, 178, 0.25);
  --ui-scrim: rgba(2, 6, 11, 0.62);

  --ui-font-display: var(--ui-font-sans);
}

/* --------------------------------------------------------------------------
   ANUBIS - the gold theme, recovered verbatim from the last commit before
   the teal rebrand (7c36bc42e^, webapp/src/style.css, "Dark Egyptian theme
   with gold accents"). Every value below is that file's, not a
   reinterpretation of it: bases run purple-black rather than blue-black, ink
   is warm, and headings take Cinzel.

   This is the owner's private identity. It is the default on
   anubis.isneps.com and selectable by anyone; it is never the public
   product's brand.
   -------------------------------------------------------------------------- */

[data-theme="anubis"] {
  color-scheme: dark;

  --ui-surface: #0a0a0f;
  --ui-surface-raised: #12121a;
  --ui-surface-sunken: #1a1625;
  --ui-surface-elevated: #1f1a2e;
  --ui-surface-hover: #252030;

  --ui-ink: #e8e6e3;
  --ui-ink-secondary: #a09b92;
  --ui-ink-muted: #6b6560;
  --ui-ink-on-accent: #0a0a0f;
  --ui-ink-heading: #e8e6e3;

  --ui-accent: #c9a227;
  --ui-accent-rgb: 201, 162, 39;
  --ui-accent-bright: #dbb82e;
  --ui-accent-dim: #8b7019;
  --ui-accent-secondary: #6b5b95;
  --ui-accent-secondary-dim: #4a3f6b;

  --ui-line: rgba(255, 255, 255, 0.10);
  --ui-line-strong: rgba(255, 255, 255, 0.25);
  --ui-line-subtle: rgba(201, 162, 39, 0.12);
  --ui-line-medium: rgba(201, 162, 39, 0.25);
  --ui-line-bright: rgba(201, 162, 39, 0.50);

  --ui-tint-raised: rgba(255, 255, 255, 0.06);
  --ui-tint-faint: rgba(255, 255, 255, 0.03);
  --ui-veil: rgba(10, 10, 15, 0.85);

  --ui-ok: #7ee2b8;
  --ui-warn: #ffd27d;
  --ui-danger: #ff9a9a;

  --ui-glow: 0 0 20px rgba(201, 162, 39, 0.15);
  --ui-glow-strong: 0 0 30px rgba(201, 162, 39, 0.25);
  --ui-scrim: rgba(6, 4, 10, 0.62);

  /* The one theme that changes a family. Cinzel is loaded only when this
     theme is active - see docs/design/anti-slop-ui-method.md, "Fonts". */
  --ui-font-display: 'Cinzel', Georgia, serif;
}

/* --------------------------------------------------------------------------
   LIGHT variants. Same roles, inverted. Declared so a surface never has to
   author a light palette of its own; a surface that has no light design
   simply never sets these.
   -------------------------------------------------------------------------- */

[data-theme="cura-light"] {
  color-scheme: light;

  --ui-surface: #ffffff;
  --ui-surface-raised: #f1f4f8;
  --ui-surface-sunken: #e7ecf2;
  --ui-surface-elevated: #ffffff;
  --ui-surface-hover: #e3e8ef;

  --ui-ink: #10161d;
  --ui-ink-secondary: #5b6672;
  --ui-ink-muted: #8a949e;
  --ui-ink-on-accent: #ffffff;
  --ui-ink-heading: #06121a;

  --ui-accent: #0e7490;
  --ui-accent-rgb: 14, 116, 144;
  --ui-accent-bright: #0891b2;
  --ui-accent-dim: #155e75;
  --ui-accent-secondary: #3f566b;
  --ui-accent-secondary-dim: #2b3c4c;

  --ui-line: rgba(16, 22, 29, 0.12);
  --ui-line-strong: rgba(16, 22, 29, 0.25);
  --ui-line-subtle: rgba(14, 116, 144, 0.16);
  --ui-line-medium: rgba(14, 116, 144, 0.30);
  --ui-line-bright: rgba(14, 116, 144, 0.55);

  --ui-tint-raised: rgba(16, 22, 29, 0.05);
  --ui-tint-faint: rgba(16, 22, 29, 0.025);
  --ui-veil: rgba(255, 255, 255, 0.85);

  --ui-ok: #0b6b45;
  --ui-warn: #7a4b00;
  --ui-danger: #a4231b;

  --ui-glow: none;
  --ui-glow-strong: none;
  --ui-scrim: rgba(16, 22, 29, 0.38);

  --ui-font-display: var(--ui-font-sans);
}

[data-theme="anubis-light"] {
  color-scheme: light;

  --ui-surface: #fbfaf7;
  --ui-surface-raised: #f3f0e9;
  --ui-surface-sunken: #ebe7dd;
  --ui-surface-elevated: #ffffff;
  --ui-surface-hover: #e5e0d4;

  --ui-ink: #1a1712;
  --ui-ink-secondary: #5f594e;
  --ui-ink-muted: #8d867a;
  --ui-ink-on-accent: #ffffff;
  --ui-ink-heading: #14110d;

  --ui-accent: #8b7019;
  --ui-accent-rgb: 139, 112, 25;
  --ui-accent-bright: #a8871f;
  --ui-accent-dim: #6b5613;
  --ui-accent-secondary: #4a3f6b;
  --ui-accent-secondary-dim: #362e4e;

  --ui-line: rgba(26, 23, 18, 0.12);
  --ui-line-strong: rgba(26, 23, 18, 0.25);
  --ui-line-subtle: rgba(139, 112, 25, 0.16);
  --ui-line-medium: rgba(139, 112, 25, 0.30);
  --ui-line-bright: rgba(139, 112, 25, 0.55);

  --ui-tint-raised: rgba(26, 23, 18, 0.05);
  --ui-tint-faint: rgba(26, 23, 18, 0.025);
  --ui-veil: rgba(251, 250, 247, 0.85);

  --ui-ok: #0b6b45;
  --ui-warn: #7a4b00;
  --ui-danger: #a4231b;

  --ui-glow: none;
  --ui-glow-strong: none;
  --ui-scrim: rgba(26, 23, 18, 0.38);

  --ui-font-display: 'Cinzel', Georgia, serif;
}

/* ==========================================================================
   TELEGRAM MINI APP BRIDGE

   A Mini App is rendered inside Telegram, which injects its own --tg-theme-*
   variables for the user's client theme. Honouring them is not optional -
   a page that ignores them looks pasted into the client.

   The bridge maps Telegram's variables ONTO our roles, with our theme value
   as the fallback. Opt in per app by adding data-tg to the root element;
   without it, our own theme wins.
   ========================================================================== */

[data-tg] {
  --ui-surface: var(--tg-theme-bg-color, #0a0f14);
  --ui-surface-raised: var(--tg-theme-secondary-bg-color, #111820);
  --ui-surface-sunken: var(--tg-theme-secondary-bg-color, #16202a);
  --ui-ink: var(--tg-theme-text-color, #e8eaed);
  --ui-ink-secondary: var(--tg-theme-hint-color, #9aa4ad);
  --ui-accent: var(--tg-theme-button-color, #0891b2);
  --ui-ink-on-accent: var(--tg-theme-button-text-color, #ffffff);
}

/* ==========================================================================
   BASE - the small amount of styling every surface wants and nobody should
   retype. Optional: import tokens.css alone for variables only, or
   tokens.css plus this block for the reset too.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

.ui-focusable:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
  box-shadow: var(--ui-focus-ring);
  border-radius: var(--ui-radius-sm);
}

/* Screen-reader-only. Present here because every surface needs it and every
   surface otherwise reinvents it slightly wrong. */
.ui-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}