/*!
 * Mobinex design tokens
 * ---------------------------------------------------------------------------
 * Structure is taken 1:1 from the Inex design system as implemented in
 * `inex-react` (`tailwind.constants.js` + `src/styles/index.css`): the same role
 * names, the same dark/base/light ramp with `op-*` alpha variants, the same
 * spacing / radius / type scales. A developer moving between the two codebases
 * uses one vocabulary, and if Mobinex ever adopts Tailwind, inex-react's
 * `tailwind.constants.js` maps onto this file unchanged.
 *
 * VALUES are Mobinex's. Every colour below is a hex already in use in
 * style.css / custom.css / mobileCss/style.css, or a shade derived from one.
 * The Inex palette (grey primary, #F6082D secondary) is deliberately NOT
 * adopted — see openspec/changes/design-system-reskin/design.md §3.
 *
 * This file only DEFINES tokens. Nothing consumes them yet, so adding it
 * changes no rendering. Adoption happens in tasks 0.6 / 0.7.
 *
 * Two Mobinex-specific extensions to the Inex system are marked [MX] below.
 * ---------------------------------------------------------------------------
 */

:root {
  /* ===================================================================
   * Colour
   * =================================================================== */

  /* Component shadow — the 4px focus/hover ring used by inputs */
  --component-shadow: rgba(18, 26, 36, 0.05);

  /* Progress ----------------------------------------------------------
   * weak = brand red, medium = existing warning, strong = existing success */
  --color-progress-weak: rgba(218, 54, 78, 1);
  --color-progress-medium: rgba(217, 193, 121, 1);
  --color-progress-strong: rgba(80, 200, 120, 1);

  /* Text & icons ------------------------------------------------------
   * Alpha steps on the ink hue rather than separate greys. This is the
   * role that replaces Mobinex's six unrelated greys — #9E9E9E (77 uses),
   * #746A6A (14), #75797D (7), #9F9F9F (6), #919191 (4), #7C7C7C (4). */
  --color-text-icons-primary: rgba(18, 26, 36, 1);
  --color-text-icons-white: rgba(255, 255, 255, 1);
  --color-text-icons-secondary: rgba(18, 26, 36, 0.72);
  --color-text-icons-placeholder: rgba(18, 26, 36, 0.4);
  --color-text-icons-disabled: rgba(18, 26, 36, 0.28);

  /* Secondary text on a DARK surface. The ladder above is all dark ink, so a
   * grey on a dark panel has no role to collapse onto — which is how
   * `.cabinet .coinX .title span` (was #C5C5C5) ended up at 1.23:1. This is
   * 7.72:1 on the navy panel, matching the #C5C5C5 it replaces (7.75:1). */
  --color-text-icons-white-secondary: rgba(255, 255, 255, 0.72);

  /* Divider — replaces #E9E9E9 (15 uses) */
  --color-divider-primary: rgba(18, 26, 36, 0.08);

  /* Primary — the ink / neutral ramp.
   * base  #121A24 (29 uses, headings and body text)
   * light #24303F (41 uses, dark panels and the footer)
   * dark  derived, 40% darker than base */
  --color-primary-dark: rgba(11, 15, 21, 1);
  --color-primary-base: rgba(18, 26, 36, 1);
  --color-primary-light: rgba(36, 48, 63, 1);
  --color-op-primary-dark: rgba(18, 26, 36, 0.2);
  --color-op-primary-base: rgba(18, 26, 36, 0.1);
  --color-op-primary-light: rgba(18, 26, 36, 0.05);

  /* Secondary — THE MOBINEX BRAND. Preserved exactly.
   * base  #DA364E (116 uses)
   * light #F56A7E (5 uses)
   * dark  derived, 15% darker than base — currently no hover shade exists */
  --color-secondary-dark: rgba(185, 46, 66, 1);
  --color-secondary-base: rgba(218, 54, 78, 1);
  --color-secondary-light: rgba(245, 106, 126, 1);
  --color-op-secondary-dark: rgba(218, 54, 78, 0.2);
  --color-op-secondary-base: rgba(218, 54, 78, 0.1);
  --color-op-secondary-light: rgba(218, 54, 78, 0.05);

  /* Success — base #50C878 (4 uses); dark and light derived.
   * NOTE the second green, #4EE335, lives in inline <style> blocks in Blade,
   * it is a visible change and is listed in design.md §3.3 for task 0.7. */
  --color-success-dark: rgba(58, 160, 92, 1);
  --color-success-base: rgba(80, 200, 120, 1);
  --color-success-light: rgba(120, 216, 152, 1);
  /* [MX] Text shade. The ramp above is for fills — its darkest, #3AA05C, is
   * 3.30:1 on white and fails AA for normal text. This is the same hue at 33%
   * lightness: 5.06:1. Use it whenever success is a sentence, not a surface. */
  --color-success-text: rgba(47, 125, 72, 1);
  --color-op-success-dark: rgba(80, 200, 120, 0.2);
  --color-op-success-base: rgba(80, 200, 120, 0.1);
  --color-op-success-light: rgba(80, 200, 120, 0.05);

  /* Informative — base #3284EA (4 uses), dark #2B5588 (5 uses) */
  --color-informative-dark: rgba(43, 85, 136, 1);
  --color-informative-base: rgba(50, 132, 234, 1);
  --color-informative-light: rgba(110, 170, 240, 1);
  --color-op-informative-dark: rgba(50, 132, 234, 0.2);
  --color-op-informative-base: rgba(50, 132, 234, 0.1);
  --color-op-informative-light: rgba(50, 132, 234, 0.05);

  /* Warning — base #D9C179 (3 uses) */
  --color-warning-dark: rgba(184, 158, 78, 1);
  --color-warning-base: rgba(217, 193, 121, 1);
  --color-warning-light: rgba(232, 214, 160, 1);

  /* The warning ramp above is decorative only: --color-warning-dark is 2.51:1 on
   * the amber wash, so it cannot carry text any more than --color-success-base
   * can. This is the readable amber — 5.33:1 on #FFFBE8. */
  --color-warning-text: rgba(138, 97, 0, 1);
  --color-op-warning-dark: rgba(217, 193, 121, 0.2);
  --color-op-warning-base: rgba(217, 193, 121, 0.1);
  --color-op-warning-light: rgba(217, 193, 121, 0.05);

  /* Error — follows the Inex rule that error-base == secondary-dark, so an
   * error reads as related to the brand but is never mistaken for a CTA.
   * light #F38192 (2 uses). */
  --color-error-dark: rgba(154, 36, 53, 1);
  --color-error-base: rgba(185, 46, 66, 1);
  --color-error-light: rgba(243, 129, 146, 1);
  --color-op-error-dark: rgba(185, 46, 66, 0.2);
  --color-op-error-base: rgba(185, 46, 66, 0.1);
  --color-op-error-light: rgba(185, 46, 66, 0.05);

  /* Additional / components — the interaction-state alpha ladder used by
   * secondary buttons, input borders, chips and hover surfaces. */
  --color-additional-components-primary: rgba(18, 26, 36, 0.08);
  --color-additional-components-hover: rgba(18, 26, 36, 0.16);
  --color-additional-components-pressed: rgba(18, 26, 36, 0.22);
  --color-op-additional-components-active: rgba(18, 26, 36, 0.22);
  --color-op-additional-components-disable: rgba(18, 26, 36, 0.14);

  /* Additional / background --------------------------------------------
   * `-additional` is the one surface that replaces Mobinex's fourteen
   * near-whites (#F7F7F7 #F1F1F1 #FAFAFA #F6F6F6 #F4F4F4 #EBEBEB #F2F2F2
   * #E8E8E8 #E7E7E7 #F8F8F8 #F9F9F9 #F5F5F5 #F3F3F3 #F0F0F0). */
  --color-additional-background-1: rgba(255, 255, 255, 1);
  --color-additional-background-2: rgba(255, 255, 255, 1);
  --color-additional-background-additional: rgba(247, 247, 247, 1);
  --color-additional-background-white: rgba(255, 255, 255, 1);
  --color-additional-background-black: rgba(255, 255, 255, 1);

  /* [MX] Mobinex extension. Inex's light mode has no dark panels, so its
   * system has no role for one. Mobinex does: #24303F is the footer, the
   * dark cards and the scrollbar thumb, 41 uses. */
  --color-additional-background-inverse: rgba(36, 48, 63, 1);

  /* [MX] Mobinex extension. The success/warning wash backgrounds that exist
   * today as flat hexes: #F5FFF8 (4 uses) and #FFFBE8 (2 uses). */
  --color-additional-background-success-wash: rgba(245, 255, 248, 1);
  --color-additional-background-warning-wash: rgba(255, 251, 232, 1);
  /* Kept at 10% alpha rather than flattened to its solid form, so a pill on a
   * non-white card composites exactly as it did before. */
  --color-additional-background-error-wash: rgba(231, 0, 0, 0.1);

  /* Status-pill fills that are saturated signals, not washes: the Pending
   * yellow and the Deactivated lime. Both carry dark ink. */
  --color-status-pending-fill: rgba(255, 230, 98, 1);
  --color-status-deactivated-fill: rgba(228, 255, 0, 1);

  /* Tinted borders that pair with the success/warning washes. */
  --color-success-border: rgba(233, 255, 229, 1);
  --color-warning-border: rgba(255, 238, 154, 1);

  /* Additional / gradient */
  --color-additional-gradient: linear-gradient(
    rgba(255, 255, 255, 1),
    rgba(247, 247, 247, 1)
  );
  --color-slider-background-gradient: linear-gradient(
    rgba(218, 54, 78, 1),
    rgba(245, 106, 126, 1)
  );

  /* ===================================================================
   * Spacing — Inex scale, unchanged
   * =================================================================== */
  --spacing-xxxxxs: 4px;
  --spacing-xxxxs: 8px;
  --spacing-xxxs: 12px;
  --spacing-xxs: 16px;
  --spacing-xs: 20px;
  --spacing-sm: 24px;
  --spacing-md: 32px;
  --spacing-lg: 40px;
  --spacing-xl: 48px;
  --spacing-xxl: 64px;
  --spacing-xxxl: 80px;

  /* ===================================================================
   * Radius — Inex scale, unchanged.
   * `maximum` is the pill used by every button; Mobinex's `.default-btn`
   * is 40px today, which is already a pill at its 41px height.
   * =================================================================== */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-maximum: 1000px;

  /* ===================================================================
   * Type — Inex scale, unchanged. Names match inex-react's Tailwind keys.
   * Every step carries its paired line-height.
   * =================================================================== */

  /* Headline — desktop */
  --font-size-desktop-headline-1: 40px;
  --line-height-desktop-headline-1: 52px;
  --font-size-desktop-headline-2: 32px;
  --line-height-desktop-headline-2: 44px;
  --font-size-desktop-headline-3: 24px;
  --line-height-desktop-headline-3: 32px;
  --font-size-desktop-headline-4: 20px;
  --line-height-desktop-headline-4: 28px;
  --font-size-desktop-headline-5: 16px;
  --line-height-desktop-headline-5: 22px;
  --font-size-desktop-headline-6: 14px;
  --line-height-desktop-headline-6: 20px;

  /* Headline — mobile */
  --font-size-mobile-headline-1: 32px;
  --line-height-mobile-headline-1: 38px;
  --font-size-mobile-headline-2: 24px;
  --line-height-mobile-headline-2: 36px;
  --font-size-mobile-headline-3: 20px;
  --line-height-mobile-headline-3: 28px;
  --font-size-mobile-headline-4: 18px;
  --line-height-mobile-headline-4: 24px;
  --font-size-mobile-headline-5: 16px;
  --line-height-mobile-headline-5: 22px;
  --font-size-mobile-headline-6: 14px;
  --line-height-mobile-headline-6: 20px;

  /* Subtitle — desktop */
  --font-size-desktop-subtitle-1: 32px;
  --line-height-desktop-subtitle-1: 44px;
  --font-size-desktop-subtitle-2: 24px;
  --line-height-desktop-subtitle-2: 34px;
  --font-size-desktop-subtitle-3: 20px;
  --line-height-desktop-subtitle-3: 28px;
  --font-size-desktop-subtitle-4: 16px;
  --line-height-desktop-subtitle-4: 22px;
  --font-size-desktop-subtitle-5: 14px;
  --line-height-desktop-subtitle-5: 20px;
  --font-size-desktop-subtitle-6: 12px;
  --line-height-desktop-subtitle-6: 16px;

  /* Subtitle — mobile */
  --font-size-mobile-subtitle-1: 24px;
  --line-height-mobile-subtitle-1: 34px;
  --font-size-mobile-subtitle-2: 20px;
  --line-height-mobile-subtitle-2: 28px;
  --font-size-mobile-subtitle-3: 18px;
  --line-height-mobile-subtitle-3: 24px;
  --font-size-mobile-subtitle-4: 16px;
  --line-height-mobile-subtitle-4: 22px;
  --font-size-mobile-subtitle-5: 14px;
  --line-height-mobile-subtitle-5: 20px;
  --font-size-mobile-subtitle-6: 12px;
  --line-height-mobile-subtitle-6: 16px;

  /* Body — desktop */
  --font-size-desktop-body-1: 20px;
  --line-height-desktop-body-1: 30px;
  --font-size-desktop-body-2: 16px;
  --line-height-desktop-body-2: 24px;
  --font-size-desktop-body-3: 14px;
  --line-height-desktop-body-3: 20px;
  --font-size-desktop-body-4: 12px;
  --line-height-desktop-body-4: 18px;

  /* Body — mobile */
  --font-size-mobile-body-1: 18px;
  --line-height-mobile-body-1: 28px;
  --font-size-mobile-body-2: 16px;
  --line-height-mobile-body-2: 24px;
  --font-size-mobile-body-3: 14px;
  --line-height-mobile-body-3: 20px;
  --font-size-mobile-body-4: 12px;
  --line-height-mobile-body-4: 18px;

  /* Button */
  --font-size-desktop-button-1: 14px;
  --line-height-desktop-button-1: 14px;
  --font-size-desktop-button-2: 12px;
  --line-height-desktop-button-2: 12px;
  --font-size-mobile-button-1: 14px;
  --line-height-mobile-button-1: 14px;
  --font-size-mobile-button-2: 12px;
  --line-height-mobile-button-2: 12px;

  /* Caption */
  --font-size-desktop-caption-1: 12px;
  --line-height-desktop-caption-1: 18px;
  --font-size-desktop-caption-2: 10px;
  --line-height-desktop-caption-2: 14px;
  --font-size-mobile-caption-1: 12px;
  --line-height-mobile-caption-1: 18px;
  --font-size-mobile-caption-2: 10px;
  --line-height-mobile-caption-2: 14px;

  /* Overline */
  --font-size-desktop-overline-1: 14px;
  --line-height-desktop-overline-1: 20px;
  --font-size-desktop-overline-2: 12px;
  --line-height-desktop-overline-2: 16px;
  --font-size-desktop-overline-3: 10px;
  --line-height-desktop-overline-3: 14px;
  --font-size-mobile-overline-1: 14px;
  --line-height-mobile-overline-1: 20px;
  --font-size-mobile-overline-2: 12px;
  --line-height-mobile-overline-2: 16px;
  --font-size-mobile-overline-3: 10px;
  --line-height-mobile-overline-3: 14px;

  /* Letter spacing */
  --letter-spacing-tightest: -2px;
  --letter-spacing-tighter: -1px;
  --letter-spacing-tight: -0.5px;
  --letter-spacing-none: 0;
  --letter-spacing-wide: 1px;
  --letter-spacing-wider: 2px;

  /* ===================================================================
   * Control heights — Inex input sizes
   * =================================================================== */
  --height-input-large: 56px;
  --height-input-medium: 48px;
  --height-input-small: 40px;

  /* [MX] Button heights, read off inex-react's `button.styles.ts`
   * (min-h-8 / min-h-10 / min-h-12). Named here because Mobinex has no
   * Tailwind to spell them. */
  --height-button-large: 48px;
  --height-button-medium: 40px;
  --height-button-small: 32px;

  /* [MX] Minimum touch target. Inex does not name one; WCAG 2.2 AA does. */
  --size-hit-target-min: 44px;

  /* ===================================================================
   * [MX] Elevation
   *
   * Inex's React components take Tailwind's default shadow scale, so the
   * design system names only `--component-shadow` (the 4px input focus ring).
   * Mobinex has no Tailwind to inherit the rest from, and had NO shadow of any
   * kind — every floating layer (dropdown panels, popups, the mobile menu) sat
   * flat on the page behind a hairline border, which is the single strongest
   * dated signal in the UI.
   *
   * These are Tailwind's ratios re-tinted from pure black onto the ink hue, so
   * shadows read as part of the palette rather than as grey haze.
   * =================================================================== */
  --elevation-sm: 0 1px 2px 0 rgba(18, 26, 36, 0.05);
  --elevation-md:
    0 4px 6px -1px rgba(18, 26, 36, 0.08), 0 2px 4px -2px rgba(18, 26, 36, 0.06);
  --elevation-lg:
    0 10px 15px -3px rgba(18, 26, 36, 0.1), 0 4px 6px -4px rgba(18, 26, 36, 0.07);
  --elevation-xl:
    0 20px 25px -5px rgba(18, 26, 36, 0.12), 0 8px 10px -6px rgba(18, 26, 36, 0.08);

  /* ===================================================================
   * Motion — Inex uses duration-100 on controls, 300ms on transforms
   * =================================================================== */
  --duration-instant: 100ms;
  --duration-fast: 200ms;
  --duration-base: 300ms;
  --easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --easing-decelerate: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* ===================================================================
   * Typeface — Mobinex's own faces, unchanged.
   *
   * These reference the family names declared in reset.css. Two of those
   * names are misleading and are NOT corrected here: `firago` loads
   * BPG-Arial-2010.ttf, and `gelight` loads the same file as `gecaps`.
   * See design.md §4.1 — correcting `firago` restyles 58 rules and needs
   * its own review.
   *
   * The Inex design system sets "Noto Sans Georgian"; adopting it for
   * Mobinex is a separate decision, not part of the token layer.
   * =================================================================== */
  --font-family-base: light, "FiraGO", sans-serif;
  --font-family-bold: lightb, "FiraGO", sans-serif;
  --font-family-display: firago, "BPG Arial", sans-serif;
  --font-family-caps: gecaps, "BPG Arial Caps", sans-serif;
}

/*
 * Breakpoints are NOT tokens — custom properties do not work in media-query
 * conditions. The scale is fixed by the Bootstrap grid already inside
 * reset.css and is enforced by the CI grep gate:
 *
 *   576px  768px  992px  1200px  1366px
 *
 * The strays being remapped onto it: 380, 420, 480, 600, 750, 790, 991.
 * See design.md §5.
 */