/* ==========================================================================
   WPStylo — design tokens
   Generated from DESIGN-SYSTEM.md. Contrast-verified: 47 checks, 0 failures
   in both light and dark. Do not edit values here without re-validating.
   ========================================================================== */

:root {
  /* ---- primitives: neutral ramp (hue 272°, spaced by L*) ---- */
  --neutral-0:    #FFFFFF;
  --neutral-50:   #F8F9FC;
  --neutral-100:  #F1F4F8;
  --neutral-200:  #E2E5EC;
  --neutral-300:  #CDD2DB;
  --neutral-400:  #A9AEB9;
  --neutral-500:  #868C97;
  --neutral-600:  #69707C;
  --neutral-700:  #515763;
  --neutral-800:  #373E4A;
  --neutral-900:  #212834;
  --neutral-1000: #131A24;

  /* ---- primitives: brand ramp (hue locked to the navy) ---- */
  --brand-50:   #D8F2FF;
  --brand-100:  #C1E1F9;
  --brand-300:  #919ED4;
  --brand-500:  #535EA1;
  --brand-600:  #3F488A;
  --brand-700:  #313A7A;
  --brand-900:  #1B2966;

  /* ---- primitives: semantic hues ---- */
  --green-600: #2E793D;  --green-50: #E6F4E9;
  --amber-700: #936000;  --amber-50: #FBF0DC;
  --red-600:   #C1393A;  --red-50:   #FBE9E9;
  --cyan-700:  #006FA3;  --cyan-50:  #DDF0F9;

  /* ---- semantic: surfaces ---- */
  --surface-canvas: var(--neutral-50);
  --surface-raised: var(--neutral-0);
  --surface-sunken: var(--brand-50);

  /* ---- semantic: text ---- */
  --text-primary:   var(--neutral-900);
  --text-secondary: var(--neutral-700);
  --text-muted:     #656B77;
  --text-disabled:  var(--neutral-400);
  --text-on-brand:  #FFFFFF;

  /* ---- semantic: borders ---- */
  --border-default: var(--neutral-200);
  --border-strong:  #808792;
  --border-focus:   var(--brand-500);

  /* ---- semantic: brand + status ---- */
  --brand:          var(--brand-900);
  --brand-hover:    var(--brand-600);
  --brand-subtle:   var(--brand-50);
  --success: var(--green-600);  --success-subtle: var(--green-50);
  --warning: var(--amber-700);  --warning-subtle: var(--amber-50);
  --danger:  var(--red-600);    --danger-subtle:  var(--red-50);
  --info:    var(--cyan-700);   --info-subtle:    var(--cyan-50);

  /* ---- data series (CVD-verified, 18.1 dE worst case) ---- */
  --series-1: #1B2966;  --series-2: #FF5031;  --series-3: #5A8BFF;
  --series-4: #7A363F;  --series-5: #A36A93;  --series-6: #3752CD;

  /* ---- type ---- */
  --font-display: "Roboto Condensed", "Arial Narrow", system-ui, sans-serif;
  --font-ui:      "Lato", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    ui-monospace, "SF Mono", "JetBrains Mono", monospace;

  --text-xs:   0.8125rem;
  --text-sm:   0.9375rem;
  --text-base: 1.125rem;
  --text-lg:   1.25rem;
  --text-xl:   1.625rem;
  /* Display sizes run ~12% larger than they would for a normal-width face:
     Roboto Condensed occupies less width, so it reads smaller at equal px. */
  --text-2xl:  clamp(1.875rem, 1.5rem + 1.7vw, 2.25rem);
  --text-3xl:  clamp(2.375rem, 1.8rem + 2.6vw, 3rem);
  --text-4xl:  clamp(3rem, 2rem + 4.4vw, 4.25rem);

  --leading-tight: 1.15;
  --leading-snug: 1.35;
  --leading-normal: 1.5;
  --leading-prose: 1.65;
  --measure: 68ch;

  /* ---- space ---- */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-6: 24px;  --space-8: 32px;  --space-12: 48px; --space-16: 64px;
  --space-24: 96px; --space-32: 128px;

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

  /* ---- elevation (tinted to the neutral hue) ---- */
  --elevation-1: 0 1px 2px rgb(33 40 52 / 0.05), 0 1px 3px rgb(33 40 52 / 0.08);
  --elevation-2: 0 2px 4px rgb(33 40 52 / 0.05), 0 4px 8px rgb(33 40 52 / 0.09);
  --elevation-3: 0 4px 8px rgb(33 40 52 / 0.06), 0 12px 20px rgb(33 40 52 / 0.10);
  --elevation-4: 0 8px 16px rgb(33 40 52 / 0.07), 0 24px 40px rgb(33 40 52 / 0.14);

  /* ---- motion ---- */
  --duration-instant: 75ms;  --duration-fast: 150ms;
  --duration-normal: 250ms;  --duration-slow: 400ms;
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --focus-ring: 0 0 0 2px var(--surface-canvas), 0 0 0 4px var(--border-focus);

  --shell: 1200px;
  --shell-narrow: 760px;
}

[data-theme="dark"] {
  --surface-canvas: #12131B;
  --surface-raised: #1C1E2A;
  --surface-sunken: #0D0E15;

  --text-primary:   #E7E9F0;
  --text-secondary: var(--neutral-300);
  --text-muted:     var(--neutral-400);
  --text-disabled:  var(--neutral-600);
  --text-on-brand:  #12131B;

  --border-default: #2B2E3D;
  --border-strong:  var(--neutral-400);
  --border-focus:   #8DA0D8;

  --brand:        #8DA0D8;
  --brand-hover:  #A6B5E4;
  --brand-subtle: #232742;

  --success: #6FCB84;  --success-subtle: #17301D;
  --warning: #E0A73A;  --warning-subtle: #33270D;
  --danger:  #F08A86;  --danger-subtle:  #331A19;
  --info:    #5FB6DE;  --info-subtle:    #102A36;

  --series-1: #8FA3E8;  --series-2: #FF9A57;  --series-3: #4FD1B0;

  --elevation-1: 0 1px 2px rgb(0 0 0 / 0.30);
  --elevation-2: 0 2px 6px rgb(0 0 0 / 0.36);
  --elevation-3: 0 6px 16px rgb(0 0 0 / 0.42);
  --elevation-4: 0 12px 32px rgb(0 0 0 / 0.50);
}

/* ==========================================================================
   Dark editorial bands (.ink) — a deep-navy surface set used for the hero and
   2–3 feature bands per page. Validated separately: 44 checks, 0 failures.
   On these bands the ICE BLUE becomes the accent (14.40:1 on the canvas),
   which is how both brand colours end up doing real work.
   ========================================================================== */

.ink {
  /* The exact brand navy, not a derived deep-navy. Re-validated on this canvas:
     44 checks, 0 failures. White 13.50:1, ice 11.61:1, muted 6.26:1. */
  --surface-canvas: #1B2966;
  --surface-raised: #2F3670;
  --surface-sunken: #0B1F57;
  --surface-glass:  rgba(216, 242, 255, 0.07);

  --text-primary:   #EAF2F8;
  --text-secondary: #C6D3DE;
  --text-muted:     #A2B3C0;
  --text-disabled:  #7B7995;
  --text-on-brand:  #1B2966;

  --border-default: rgba(216, 242, 255, 0.14);
  --border-strong:  #8B89A5;
  --border-focus:   #D8F2FF;

  --brand:          #D8F2FF;
  --brand-hover:    #FFFFFF;
  --brand-subtle:   rgba(216, 242, 255, 0.12);

  --success: #7BD68F;  --success-subtle: rgba(123, 214, 143, 0.16);
  --warning: #E7AF44;  --warning-subtle: rgba(231, 175, 68, 0.16);
  --danger:  #F5938F;  --danger-subtle:  rgba(245, 147, 143, 0.16);
  --info:    #8AC9E8;  --info-subtle:    rgba(138, 201, 232, 0.16);

  --elevation-1: 0 1px 2px rgb(0 0 0 / 0.28);
  --elevation-2: 0 2px 8px rgb(0 0 0 / 0.34);
  --elevation-3: 0 8px 24px rgb(0 0 0 / 0.42);
  --elevation-4: 0 16px 48px rgb(0 0 0 / 0.52);

  background: var(--surface-canvas);
  color: var(--text-primary);
}

/* ==========================================================================
   Tint ladder + corrected accents
   The site read flat because two colours covered very little surface. These
   add coverage without adding brand colours: every tint is the ice hue at a
   different lightness. All values checked with the validator.
   ========================================================================== */

:root {
  --tint-50:  #F8FDFF;   /* navy 13.17:1  ·  muted 5.22:1 */
  --tint-100: #EFF9FF;   /* navy 12.64:1  ·  muted 5.01:1 */
  --tint-200: #E4F5FE;   /* navy 12.08:1  ·  muted 4.79:1 */
  --tint-300: #D8F2FF;   /* the brand ice. navy 11.61:1 · muted 4.61:1 */
  --tint-400: #C8EBFB;   /* navy 10.76:1 — muted text FAILS here, use secondary */
  --tint-500: #B8E2F6;   /* navy  9.80:1 — headings and secondary only */

  --ink-900: #1B2966;    /* the exact brand navy */
  --ink-800: #2A3372;    /* lighter highlight block, white 11.57:1 */

  /* Star ratings were #E8A33D at 2.17:1 on white — below the 3:1 a graphic
     that carries meaning needs. This clears it on white and on tint-300. */
  --rating: #8E5F00;     /* 5.55:1 white · 4.96:1 tint-200 · 4.77:1 tint-300.
                            Star glyphs are text to a checker, so they are held
                            to 4.5:1 rather than the 3:1 a pure graphic needs. */
  --status-live: #3F9758;/* 3.63:1 on white */

  --panel-radius: 32px;
}