/* ALTCONN design tokens -- the single place every surface reads its values from.
 *
 * SOURCE OF TRUTH IS THE BRAND BOOK, NOT THIS FILE. Every value below is copied from
 * docs/brandbook/03-color-typography.md section 10 (colour roles) and section 17 (type scale), and
 * from docs/brandbook/04-ui-kit.md sections 2.1-2.6 (spacing, radii, shadows, layers, motion).
 * DesignTokensTests parses those chapters and fails if this file drifts from them, so a value that
 * needs changing is changed in the brand book FIRST and mirrored here -- never the other way round,
 * and never invented at a call site.
 *
 * Consumers today: the admin panel (wwwroot/css/admin-theme.css maps its --admin-* names onto these).
 * Consumers next: the Mini App and the public site. When the second surface appears, this file moves
 * to a shared location and both link it; until then a single copy is a single source, and the test
 * above is what actually guarantees that.
 *
 * No external fonts, no CDN: docs/brandbook/05-website.md section 7. */

/* --- Inter, self-hosted (chapter 3, section 14) ----------------------------------------------
 * Variable woff2, weight axis 100-900, declared 400-700 -- the range the type scale uses. Split into
 * two subsets by unicode-range so a Russian interface does not wait for the Latin file and an English
 * one never downloads Cyrillic at all. Files are committed rather than fetched at build time: a font
 * downloaded by the build turns a runtime dependency into a build dependency, it does not remove it.
 *
 * No CDN, ever. The rule bans EXTERNAL REQUESTS, not web fonts: self-hosted, no third-party domain
 * learns anything about the visitor. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/inter-var-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/inter-var-cyrillic.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* The fallback, with metrics bent to match Inter's. `font-display: swap` means the system face paints
 * first and Inter replaces it -- and without these descriptors that replacement moves every line of
 * text, which is worst exactly where the connection is slow. The numbers are DERIVED, not guessed:
 * size-adjust is Inter's average advance width over Arial's, measured over a letter-frequency-weighted
 * set (OS/2's xAvgCharWidth is computed differently in fonts of different eras and is not comparable);
 * ascent, descent and line-gap are Inter's typo metrics divided by that ratio. Arial and Segoe UI came
 * out within 0.4% of each other, so one face covers both.
 *
 * If neither local face exists (most Linux desktops), this @font-face simply does not resolve and the
 * stack falls through to the next family -- unstyled but readable, which is the required behaviour. */
@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial'), local('Helvetica Neue'), local('Segoe UI');
  size-adjust: 107.51%;
  ascent-override: 90.11%;
  descent-override: 22.44%;
  line-gap-override: 0%;
}

:root {
  /* --- Background: static layers, do not react to input (chapter 3, section 10) ------------- */
  --color-bg-primary: #090b14;      /* Background/Primary   */
  --color-bg-secondary: #101423;    /* Background/Secondary */
  --color-bg-elevated: #171c2d;     /* Background/Elevated  */

  /* --- Surface: interactive layers -- list rows, clickable cards, menu items ---------------- */
  --color-surface-default: #101423; /* Surface/Default  */
  --color-surface-hover: #1a1d2c;   /* Surface/Hover    -- white 4%  */
  --color-surface-pressed: #232735; /* Surface/Pressed  -- white 8%  */
  --color-surface-selected: #14293d;/* Surface/Selected -- accent 12% */

  /* --- Text -------------------------------------------------------------------------------- */
  --color-text-primary: #ffffff;    /* Text/Primary   -- headings, values          */
  --color-text-secondary: #e5e7eb;  /* Text/Secondary -- body text                 */
  --color-text-muted: #9ea5b5;      /* Text/Muted     -- metadata, hints           */
  --color-text-disabled: #5b6274;   /* Text/Disabled  -- outside WCAG on purpose   */
  --color-text-inverse: #090b14;    /* Text/Inverse   -- on accent surfaces        */

  /* --- Border ------------------------------------------------------------------------------ */
  --color-border-subtle: #161b2a;   /* Border/Subtle  -- dividers inside a card, table rows */
  --color-border-default: #1e2336;  /* Border/Default -- card, panel, modal                 */
  --color-border-strong: #2b3149;   /* Border/Strong  -- dense interfaces                   */
  --color-border-control: #646c80;  /* Border/Control -- inputs, secondary buttons, checkboxes */
  --color-border-focus: #32c5ff;    /* Border/Focus   -- focus ring                         */

  /* --- Action ------------------------------------------------------------------------------ */
  --color-action-primary: #32c5ff;  /* Action/Primary  */
  --color-action-hover: #57cfff;    /* Action/Hover    -- +18% white  */
  --color-action-pressed: #2cade0;  /* Action/Pressed  -- +12% black  */
  --color-action-disabled: #1e2336; /* Action/Disabled -- label uses Text/Disabled */

  /* --- Status ------------------------------------------------------------------------------ */
  --color-success: #3ddc84;
  --color-success-soft: rgba(61, 220, 132, 0.14);
  --color-warning: #f4c542;
  --color-warning-soft: rgba(244, 197, 66, 0.14);
  --color-error: #ff5b6e;
  --color-error-soft: rgba(255, 91, 110, 0.14);
  --color-error-hover: #ff7988;     /* derived by the same rule as Action/Hover  */
  --color-error-pressed: #e05061;   /* derived by the same rule as Action/Pressed */
  --color-info: #38bdf8;
  --color-info-soft: rgba(56, 189, 248, 0.14);

  /* Accent fill for badges and soft plates, matching the Soft variants above. */
  --color-action-soft: rgba(50, 197, 255, 0.14);

  /* Modal and drawer scrim (chapter 4, section 2.5). Blur 8px is applied by the component. */
  --color-overlay: rgba(9, 11, 20, 0.72);

  /* --- Elevation: in a dark interface height is carried by BACKGROUND, not by shadow -------- */
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 28px rgba(0, 0, 0, 0.26);
  --shadow-popover: 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.6);
  --shadow-focus: 0 0 0 4px rgba(50, 197, 255, 0.24);

  /* --- Layers: z-index: 9999 is forbidden; an element that does not fit needs a new layer --- */
  --layer-base: 0;
  --layer-sticky: 100;
  --layer-dropdown: 200;
  --layer-popover: 300;
  --layer-drawer: 400;
  --layer-modal: 500;
  --layer-toast: 600;
  --layer-tooltip: 700;

  /* --- Spacing: base 4px. Values outside the scale are not allowed (chapter 4, 2.1) --------- */
  --space-4: 0.25rem;
  --space-8: 0.5rem;
  --space-12: 0.75rem;
  --space-16: 1rem;
  --space-24: 1.5rem;
  --space-32: 2rem;
  --space-48: 3rem;
  --space-64: 4rem;
  --space-96: 6rem;

  /* --- Radii: a button and an input share a radius, or the form looks assembled from parts -- */
  --radius-sm: 8px;                 /* badges, chips, checkboxes        */
  --radius-md: 14px;                /* buttons, inputs, selects         */
  --radius-lg: 20px;                /* cards, modals, popovers          */
  --radius-xl: 28px;                /* large promo blocks, hero cards   */
  --radius-full: 999px;             /* switches, avatars, icon buttons  */

  /* --- Motion: entry is always slower than exit (chapter 4, 2.6) ---------------------------- */
  --motion-instant: 100ms;
  --motion-fast: 200ms;
  --motion-base: 300ms;
  --motion-exit: 200ms;
  --motion-screen: 400ms;
  --motion-brand: 800ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-enter: cubic-bezier(0, 0, 0, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --ease-brand: cubic-bezier(0.215, 0.61, 0.355, 1);

  /* --- Typography --------------------------------------------------------------------------
   * 'Inter Fallback' sits directly after Inter so the metric-adjusted face is what paints while the
   * font loads. The plain system stack stays behind it as the last resort. */
  --font-sans: 'Inter', 'Inter Fallback', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;

  /* Type scale, chapter 3 section 17. Display..H3 interpolate between mobile and desktop rather
   * than stepping at the breakpoint; H4 and below step, because 2-4px is not worth fluid maths.
   * Line height is a MULTIPLIER, never pixels. */
  --font-display: clamp(2.5rem, calc(2.5rem + (100vw - 40rem) * 0.08333), 4.5rem);
  --font-h1: clamp(2rem, calc(2rem + (100vw - 40rem) * 0.0625), 3.5rem);
  --font-h2: clamp(1.75rem, calc(1.75rem + (100vw - 40rem) * 0.05208), 3rem);
  --font-h3: clamp(1.5rem, calc(1.5rem + (100vw - 40rem) * 0.03125), 2.25rem);
  --font-h4: 1.375rem;              /* 22px mobile, 28px from tablet -- see media query below */
  --font-h5: 1.25rem;               /* 20px mobile, 24px from tablet */
  --font-h6: 1.125rem;              /* 18px mobile, 20px from tablet */
  --font-body-lg: 1.0625rem;        /* 17px mobile, 18px from tablet */
  --font-body: 1rem;                /* 16px everywhere -- body text is never shrunk on mobile */
  --font-small: 0.875rem;           /* 14px everywhere */
  --font-caption: 0.75rem;          /* 12px everywhere */

  --leading-tight: 1.12;            /* Display, H1  */
  --leading-heading: 1.2;           /* H2-H4        */
  --leading-subhead: 1.35;          /* H5-H6        */
  --leading-body: 1.5;              /* Body and below */
}

/* Breakpoints cannot be custom properties -- a media query does not read var(). The numbers here are
 * the ones in chapter 4 section 2.2, and design goes mobile-first, so every query is min-width. */
@media (min-width: 640px) {
  :root {
    --font-h4: 1.75rem;             /* 28px */
    --font-h5: 1.5rem;              /* 24px */
    --font-h6: 1.25rem;             /* 20px */
    --font-body-lg: 1.125rem;       /* 18px */
  }
}