/* ============================================================
   Coincento Design System — Design Tokens
   Exactpro DLT-based Platform
   Layer 1: primitives  →  Layer 2: semantic  →  Layer 3: component
   ============================================================ */

:root {
  /* ---------- 1. PRIMITIVES · COLOR ------------------------ */

  /* Brand teal — derived from the mark #3F979F */
  --c-teal-50:  #F2F9F9;
  --c-teal-100: #E7F2F3;
  --c-teal-200: #C9E1E3;
  --c-teal-300: #A5CFD3;
  --c-teal-400: #6FB6BB;
  --c-teal-500: #3F979F; /* CORE BRAND — graphics only, not body text on white (3.4:1) */
  --c-teal-600: #35838B;
  --c-teal-700: #2E7178; /* text-safe on white — 5.6:1 */
  --c-teal-800: #24585E;
  --c-teal-900: #1A4046;

  /* Petrol — the brand near-black #002833 */
  --c-petrol-900: #001A22;
  --c-petrol-800: #002833; /* CORE BRAND DARK — 15.5:1 on white */
  --c-petrol-700: #073640;
  --c-petrol-600: #124B57;
  --c-petrol-500: #1F5F6B;

  /* Neutrals — teal-tinted, never pure grey */
  --c-neutral-0:   #FFFFFF;
  --c-neutral-25:  #FBFDFD;
  --c-neutral-50:  #F7FAFA;
  --c-neutral-100: #EDF4F5;
  --c-neutral-200: #E3EDEE;
  --c-neutral-300: #C9E1E3;
  --c-neutral-400: #9FC4C9;
  --c-neutral-500: #55707A; /* muted floor — 5.3:1 white, 4.7:1 on #EDF4F5 */
  --c-neutral-600: #4A6670; /* secondary text — 6.1:1 */
  --c-neutral-700: #3D5860; /* body text — 7.6:1 */
  --c-neutral-900: #002833;

  /* Status — harmonised with the teal family */
  --c-success-50:  #E8F5F0;
  --c-success-200: #A9D9C8;
  --c-success-600: #17795C; /* 5.4:1 */
  --c-success-800: #0E5540;

  --c-warning-50:  #FDF3E4;
  --c-warning-200: #F0D3A2;
  --c-warning-600: #A05F00; /* 5.1:1 */
  --c-warning-800: #6F4200;

  --c-danger-50:   #FCEDEC;
  --c-danger-200:  #F0BDB9;
  --c-danger-600:  #C0322B; /* 5.6:1 */
  --c-danger-800:  #8C221C;

  /* Brand gradients — from the cover / banner artwork */
  --grad-brand:    linear-gradient(135deg, #3F979F 0%, #3B5865 100%);
  --grad-brand-hi: linear-gradient(115deg, #4FA8AE 0%, #2E7178 55%, #16404C 100%);
  --grad-veil:     linear-gradient(200deg, rgba(22,26,36,.30) 0%, rgba(60,123,134,.30) 100%);

  /* ---------- 1. PRIMITIVES · TYPE -------------------------
     Public Sans carries the interface: headings, body, labels, data.
     Open Sans is reserved for actions — its wider, warmer forms
     make a button read as a button, not as a line of text.
     The wordmark is outlined artwork, not a font. Never set
     "Coincento" in a live typeface.                             */
  --font-text:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: var(--font-text);
  --font-action:  "Inter", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", "Menlo", "Consolas", monospace;

  --fs-display-1: 3.5rem;   /* 56 */
  --fs-display-2: 2.75rem;  /* 44 */
  --fs-h1:        2.25rem;  /* 36 */
  --fs-h2:        1.75rem;  /* 28 */
  --fs-h3:        1.375rem; /* 22 */
  --fs-h4:        1.125rem; /* 18 */
  --fs-body-lg:   1.125rem; /* 18 */
  --fs-body:      1rem;     /* 16 — base, matches the Button spec */
  --fs-body-sm:   0.875rem; /* 14 */
  --fs-caption:   0.8125rem;/* 13 */
  --fs-overline:  0.75rem;  /* 12 */

  --lh-tight:  1.12;
  --lh-snug:   1.25;
  --lh-normal: 1.45;
  --lh-relaxed:1.62;

  --ls-tightest: -0.03em;
  --ls-tight:    -0.02em;
  --ls-snug:     -0.01em;
  --ls-normal:   0;
  --ls-wide:     0.04em;
  --ls-widest:   0.09em;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* ---------- 1. PRIMITIVES · SPACE / SHAPE ---------------- */
  --sp-1:  0.25rem;  --sp-2:  0.5rem;   --sp-3:  0.75rem;  --sp-4:  1rem;
  --sp-5:  1.25rem;  --sp-6:  1.5rem;   --sp-8:  2rem;     --sp-10: 2.5rem;
  --sp-12: 3rem;     --sp-16: 4rem;     --sp-20: 5rem;     --sp-24: 6rem;
  --sp-32: 8rem;

  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   8px;   /* default */
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 999px;
  --radius: var(--radius-md); /* alias used by the original wireframe */

  --border-hairline: 0.5px;
  --border-thin:     1px;
  --border-thick:    2px;
  --border-accent:   3px;

  --container-sm:  40rem;   /* 640 — long-form text */
  --container-md:  64rem;   /* 1024 — app content */
  --container-lg:  75rem;   /* 1200 — marketing */

  /* ---------- 1. PRIMITIVES · DEPTH / MOTION --------------- */
  --shadow-1: 0 1px 2px rgba(0,40,51,.06), 0 1px 3px rgba(0,40,51,.05);
  --shadow-2: 0 2px 4px rgba(0,40,51,.05), 0 6px 16px rgba(0,40,51,.07);
  --shadow-3: 0 8px 24px rgba(0,40,51,.10);
  --shadow-4: 0 20px 48px rgba(0,40,51,.14);
  --shadow-inset: inset 0 1px 2px rgba(0,40,51,.05);
  /* Signature brand glow — from the Button component spec */
  --shadow-brand:    0 2px 5px rgba(63,151,159,.40);

  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 280ms;
  /* Stronger than the stock ease-out and stronger than the .2,.8,.2,1 this
     replaced: it leaves faster and settles flatter, so a 180ms transition
     reads as decisive rather than merely short. Easing is what makes a
     duration feel fast, not the number on its own. */
  --ease-out: cubic-bezier(.23,1,.32,1);
  --ease-in-out: cubic-bezier(.4,0,.2,1);

  --z-base: 0; --z-sticky: 100; --z-overlay: 400; --z-modal: 500; --z-toast: 600;

  /* ============================================================
     2. SEMANTIC — light theme (default)
     ============================================================ */
  --bg-canvas:      var(--c-neutral-50);
  --bg-surface:     var(--c-neutral-0);
  --bg-surface-alt: var(--c-neutral-100);
  --bg-sunken:      var(--c-neutral-200);
  --bg-inverse:     var(--c-petrol-800);
  --bg-brand:       var(--c-teal-500);
  --bg-brand-soft:  var(--c-teal-100);

  --fg-default:   var(--c-petrol-800);
  --fg-body:      var(--c-neutral-700);
  --fg-secondary: var(--c-neutral-600);
  --fg-muted:     var(--c-neutral-500);
  /* Off the ramp deliberately — the gap between neutral-500 and neutral-400 is
     the whole readable range, and 500 still read as a typed value. 3.57:1 on
     the field ground, i.e. under the 4.5:1 text floor. Defensible only because
     every field here carries a permanent visible <label> and the placeholder is
     an example rather than an instruction; nothing is lost if it goes unread.
     Put a placeholder-as-label anywhere in the system and this must go back to
     neutral-500. */
  --fg-placeholder: #69848D; /* 3.57:1 on the field ground — see note */
  --fg-inverse:   var(--c-neutral-0);
  --fg-on-brand:  var(--c-neutral-0);
  /* Secondary tier on a brand band. Grey would wash out against the
     teal; a transparency of the band's own white does not. .88 is the
     floor that still clears 4.5:1 on the lightest gradient stop. */
  --fg-on-brand-muted: rgba(255,255,255,.88);
  --fg-brand:     var(--c-teal-700);
  --fg-link:      var(--c-teal-700);

  --border-subtle: var(--c-neutral-200);
  --border-default:var(--c-neutral-300);
  --border-strong: var(--c-neutral-400);
  --border-brand:  var(--c-teal-500);
  --border-inverse:rgba(255,255,255,.18);

  --focus-ring: 0 0 0 3px rgba(63,151,159,.38);
  --focus-ring-inverse: 0 0 0 3px rgba(111,182,187,.55);

  /* Brand mark fills. The two-tone mark needs a theme-aware petal:
     petrol on a petrol surface is invisible. */
  --brand-mark-hex:   var(--c-teal-500);
  --brand-mark-petal: var(--c-petrol-800);

  --fg-success: var(--c-success-600);  --bg-success: var(--c-success-50);  --border-success: var(--c-success-200);
  --fg-warning: var(--c-warning-600);  --bg-warning: var(--c-warning-50);  --border-warning: var(--c-warning-200);
  --fg-danger:  var(--c-danger-600);   --bg-danger:  var(--c-danger-50);   --border-danger:  var(--c-danger-200);
  --fg-info:    var(--c-teal-700);     --bg-info:    var(--c-teal-50);     --border-info:    var(--c-teal-200);

  /* ---------- 3. COMPONENT ------------------------------- */
  /* Primary button. Ships exactly as specified in the Figma
     component: teal-500 ground, near-white label, brand glow.
     ACCESSIBILITY: the Figma teal-500 ground gave #F7F9FA on #3F979F
     = 3.24:1. That rode on the large-text exemption, which needs
     >=18.66px AND bold — and the family moved to weight 500, so the
     exemption no longer applied at any size on this page. Ground
     moved to teal-700: 5.6:1, AA at every size and weight. Route (a),
     bumping --btn-fs to 19px, was the alternative and was not taken
     because it would have resized every button in the system. */
  --btn-primary-bg:       var(--c-teal-700);
  --btn-primary-bg-hover: var(--c-teal-800);
  --btn-primary-fg:       #F7F9FA;
  --btn-primary-shadow:   var(--shadow-brand);
  /* Typography is shared by the whole family, not per variant. A heavier
     primary made the same label read as a different component. 700 is the
     weight the Figma button ships with, so the others rise to it rather
     than primary dropping to 600. */
  --btn-fs:               var(--fs-body);   /* 16px */
  --btn-fw:               var(--fw-medium); /* 500 */

  --btn-height-sm: 32px;
  --btn-height-md: 40px;   /* 24px content + 2 x 8px padding */
  --btn-height-lg: 48px;
  --btn-pad-x:     var(--sp-6); /* 24px, per the spec */
  --control-height: 44px;
  --nav-height: 64px;
  --appbar-height: 56px;
}

/* Opt-in AA-compliant primary: <body class="a11y-strict"> or on any
   subtree. Keeps geometry and glow, only swaps the ground colour. */
.a11y-strict {
  --btn-primary-bg:       var(--c-teal-700);
  --btn-primary-bg-hover: var(--c-teal-800);
}

/* ============================================================
   2. SEMANTIC — dark theme
   Explicit choice wins; system preference is the fallback.
   ============================================================ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-canvas:      var(--c-petrol-900);
    --bg-surface:     var(--c-petrol-800);
    --bg-surface-alt: var(--c-petrol-700);
    --bg-sunken:      #00141B;
    --bg-inverse:     var(--c-neutral-0);
    --bg-brand:       var(--c-teal-600);
    --bg-brand-soft:  rgba(63,151,159,.16);

    --fg-default:   #ECF5F6;
    --fg-body:      #D2E4E6;
    --fg-secondary: var(--c-neutral-400);
    --fg-muted:     #7FA3AA;
    --fg-inverse:   var(--c-petrol-800);
    --fg-on-brand:  var(--c-neutral-0);
  /* Secondary tier on a brand band. Grey would wash out against the
     teal; a transparency of the band's own white does not. .88 is the
     floor that still clears 4.5:1 on the lightest gradient stop. */
  --fg-on-brand-muted: rgba(255,255,255,.88);
    --fg-brand:     var(--c-teal-400);
    --fg-link:      var(--c-teal-400);

    --border-subtle: rgba(159,196,201,.14);
    --border-default:rgba(159,196,201,.24);
    --border-strong: rgba(159,196,201,.40);
    --border-brand:  var(--c-teal-400);
    --border-inverse:rgba(0,40,51,.18);

    --brand-mark-hex:   var(--c-teal-400);
    --brand-mark-petal: #FFFFFF;

    --shadow-1: 0 1px 2px rgba(0,0,0,.40);
    --shadow-2: 0 2px 4px rgba(0,0,0,.36), 0 6px 16px rgba(0,0,0,.34);
    --shadow-3: 0 8px 24px rgba(0,0,0,.44);
    --shadow-4: 0 20px 48px rgba(0,0,0,.52);

    --fg-success: #6FCFAE;  --bg-success: rgba(23,121,92,.18);  --border-success: rgba(111,207,174,.34);
    --fg-warning: #E7B466;  --bg-warning: rgba(160,95,0,.20);   --border-warning: rgba(231,180,102,.34);
    --fg-danger:  #F0918A;  --bg-danger:  rgba(192,50,43,.18);  --border-danger:  rgba(240,145,138,.34);
    --fg-info:    var(--c-teal-400); --bg-info: rgba(63,151,159,.16); --border-info: rgba(111,182,187,.34);
  }
}

:root[data-theme="dark"] {
  --bg-canvas:      var(--c-petrol-900);
  --bg-surface:     var(--c-petrol-800);
  --bg-surface-alt: var(--c-petrol-700);
  --bg-sunken:      #00141B;
  --bg-inverse:     var(--c-neutral-0);
  --bg-brand:       var(--c-teal-600);
  --bg-brand-soft:  rgba(63,151,159,.16);

  --fg-default:   #ECF5F6;
  --fg-body:      #D2E4E6;
  --fg-secondary: var(--c-neutral-400);
  --fg-muted:     #7FA3AA;
  --fg-inverse:   var(--c-petrol-800);
  --fg-on-brand:  var(--c-neutral-0);
  /* Secondary tier on a brand band. Grey would wash out against the
     teal; a transparency of the band's own white does not. .88 is the
     floor that still clears 4.5:1 on the lightest gradient stop. */
  --fg-on-brand-muted: rgba(255,255,255,.88);
  --fg-brand:     var(--c-teal-400);
  --fg-link:      var(--c-teal-400);

  --border-subtle: rgba(159,196,201,.14);
  --border-default:rgba(159,196,201,.24);
  --border-strong: rgba(159,196,201,.40);
  --border-brand:  var(--c-teal-400);
  --border-inverse:rgba(0,40,51,.18);

  --brand-mark-hex:   var(--c-teal-400);
  --brand-mark-petal: #FFFFFF;

  --shadow-1: 0 1px 2px rgba(0,0,0,.40);
  --shadow-2: 0 2px 4px rgba(0,0,0,.36), 0 6px 16px rgba(0,0,0,.34);
  --shadow-3: 0 8px 24px rgba(0,0,0,.44);
  --shadow-4: 0 20px 48px rgba(0,0,0,.52);

  --fg-success: #6FCFAE;  --bg-success: rgba(23,121,92,.18);  --border-success: rgba(111,207,174,.34);
  --fg-warning: #E7B466;  --bg-warning: rgba(160,95,0,.20);   --border-warning: rgba(231,180,102,.34);
  --fg-danger:  #F0918A;  --bg-danger:  rgba(192,50,43,.18);  --border-danger:  rgba(240,145,138,.34);
  --fg-info:    var(--c-teal-400); --bg-info: rgba(63,151,159,.16); --border-info: rgba(111,182,187,.34);
}