/* ============================================================
   Accidentright — Color tokens
   Premium dark canvas · trust blue · vivid amber "rescue" accent
   ============================================================ */

:root {
  /* ---- Ink (premium dark, cool charcoal-navy) ---- */
  --ink-950: #06090F;
  --ink-900: #0B0F16;   /* deepest page bg */
  --ink-850: #0F141F;
  --ink-800: #141A28;   /* dark surface */
  --ink-750: #1A2233;   /* dark raised */
  --ink-700: #222C40;
  --ink-600: #2E3A52;
  --ink-500: #3D4B66;

  /* ---- Brand blue (trust / structure / links) ---- */
  --blue-50:  #EAF1FE;
  --blue-100: #D2E1FD;
  --blue-200: #A9C5FB;
  --blue-300: #7AA4F8;
  --blue-400: #4C82F4;
  --blue-500: #2563EB;  /* primary brand */
  --blue-600: #1D4FD0;
  --blue-700: #1A41A8;
  --blue-800: #16346F;

  /* ---- Signal amber (vivid accent / action / heroic) ---- */
  --signal-50:  #FFF5E6;
  --signal-100: #FFE6C2;
  --signal-200: #FFD194;
  --signal-300: #FFB959;
  --signal-400: #FFA227;
  --signal-500: #FF8A00;  /* accent */
  --signal-600: #E06E00;
  --signal-700: #B85600;

  /* ---- Slate neutrals (light surfaces & text) ---- */
  --slate-0:   #FFFFFF;
  --slate-25:  #F8FAFC;
  --slate-50:  #F1F5F9;
  --slate-100: #E7ECF3;
  --slate-200: #D4DCE7;
  --slate-300: #B6C2D2;
  --slate-400: #8A99AD;
  --slate-500: #62718A;
  --slate-600: #475569;
  --slate-700: #33415A;
  --slate-800: #1E293B;
  --slate-900: #0F172A;

  /* ---- Semantic hues ---- */
  --green-50:  #E7F7EF;
  --green-500: #1FA971;   /* success / "right" / resolved */
  --green-600: #178A5C;
  --red-50:    #FDECEC;
  --red-500:   #E5484D;   /* danger */
  --red-600:   #C5343A;
  --warn-50:   #FFF6E5;
  --warn-500:  #F5A524;   /* warning */
  --warn-600:  #D2860B;

  /* =========================================================
     Semantic aliases — LIGHT context (default app/form surfaces)
     ========================================================= */
  --bg-page:      var(--slate-25);
  --bg-surface:   var(--slate-0);
  --bg-raised:    var(--slate-0);
  --bg-sunken:    var(--slate-50);
  --bg-inset:     var(--slate-100);

  --text-strong:  var(--slate-900);
  --text-default: var(--slate-800);
  --text-muted:   var(--slate-600);
  --text-subtle:  var(--slate-400);
  --text-inverse: var(--slate-0);

  --border-subtle:  var(--slate-100);
  --border-default: var(--slate-200);
  --border-strong:  var(--slate-300);

  --brand:        var(--blue-500);
  --brand-hover:  var(--blue-600);
  --brand-active: var(--blue-700);
  --brand-tint:   var(--blue-50);
  --on-brand:     var(--slate-0);

  --accent:       var(--signal-500);
  --accent-hover: var(--signal-600);
  --accent-active:var(--signal-700);
  --accent-tint:  var(--signal-50);
  --on-accent:    var(--ink-900);

  --link:         var(--blue-600);

  --success:      var(--green-500);
  --success-tint: var(--green-50);
  --danger:       var(--red-500);
  --danger-tint:  var(--red-50);
  --warning:      var(--warn-500);
  --warning-tint: var(--warn-50);

  --focus-ring:   color-mix(in oklch, var(--blue-500) 55%, transparent);
}

/* =========================================================
   Semantic aliases — DARK context
   Apply to any premium-dark region (hero, footer, app shell).
   ========================================================= */
[data-theme="dark"],
.surface-dark {
  --bg-page:      var(--ink-900);
  --bg-surface:   var(--ink-800);
  --bg-raised:    var(--ink-750);
  --bg-sunken:    var(--ink-950);
  --bg-inset:     var(--ink-700);

  --text-strong:  var(--slate-0);
  --text-default: var(--slate-100);
  --text-muted:   #9FB0C6;
  --text-subtle:  #6B7C95;
  --text-inverse: var(--slate-900);

  --border-subtle:  rgba(255, 255, 255, 0.07);
  --border-default: rgba(255, 255, 255, 0.12);
  --border-strong:  rgba(255, 255, 255, 0.20);

  --brand:        var(--blue-400);
  --brand-hover:  var(--blue-300);
  --brand-active: var(--blue-200);
  --brand-tint:   rgba(76, 130, 244, 0.14);
  --on-brand:     var(--ink-900);

  --accent:       var(--signal-500);
  --accent-hover: var(--signal-400);
  --accent-active:var(--signal-300);
  --accent-tint:  rgba(255, 138, 0, 0.14);
  --on-accent:    var(--ink-900);

  --link:         var(--blue-300);

  --success-tint: rgba(31, 169, 113, 0.16);
  --danger-tint:  rgba(229, 72, 77, 0.16);
  --warning-tint: rgba(245, 165, 36, 0.16);

  --focus-ring:   color-mix(in oklch, var(--blue-300) 60%, transparent);
}

/* ============================================================
   Accidentright — Typography tokens
   Display: Space Grotesk (technical, confident, modern)
   Text/UI: Manrope (clean geometric sans, great umlaut support)
   Mono:    JetBrains Mono (claim IDs, figures, data)
   NOTE: substitutes for the live WordPress theme fonts — flag to
   re-supply official brand fonts if they differ.
   ============================================================ */

:root {
  /* ---- Families ---- */
  --font-display: "Space Grotesk", "Manrope", system-ui, sans-serif;
  --font-sans:    "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  /* ---- Weights ---- */
  --fw-regular:  400; /* @kind font */
  --fw-medium:   500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold:     700; /* @kind font */
  --fw-extra:    800; /* @kind font */

  /* ---- Fluid display scale (marketing / hero) ---- */
  --text-display-xl: clamp(2.75rem, 1.6rem + 5.2vw, 5rem); /* @kind other */
  --text-display-lg: clamp(2.25rem, 1.5rem + 3.4vw, 3.5rem); /* @kind other */
  --text-display-md: clamp(1.875rem, 1.4rem + 2.1vw, 2.75rem); /* @kind other */

  /* ---- Static type scale (UI / product) ---- */
  --text-3xl: 2rem;      /* 32 */
  --text-2xl: 1.625rem;  /* 26 */
  --text-xl:  1.375rem;  /* 22 */
  --text-lg:  1.125rem;  /* 18 */
  --text-md:  1rem;      /* 16 — base */
  --text-sm:  0.875rem;  /* 14 */
  --text-xs:  0.75rem;   /* 12 */
  --text-2xs: 0.6875rem; /* 11 — labels/eyebrows */

  /* ---- Line heights ---- */
  --leading-tight:   1.08;  /* @kind other */
  --leading-snug:    1.22;  /* @kind other */
  --leading-normal:  1.5;   /* @kind other */
  --leading-relaxed: 1.65;  /* @kind other */

  /* ---- Letter spacing ---- */
  --tracking-tight:  -0.02em;   /* @kind other */
  --tracking-snug:   -0.01em;   /* @kind other */
  --tracking-normal: 0;         /* @kind other */
  --tracking-wide:   0.04em;    /* @kind other */
  --tracking-eyebrow: 0.14em;   /* @kind other */
}

/* Optional base element defaults (consumers may opt in) */
.ar-type-base {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: var(--text-default);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ============================================================
   Accidentright — Spacing, sizing & radius tokens
   Base unit: 4px. Generous, structured rhythm.
   ============================================================ */

:root {
  /* ---- Spacing scale (4px base) ---- */
  --space-0:  0;
  --space-1:  0.25rem;  /* 4  */
  --space-2:  0.5rem;   /* 8  */
  --space-3:  0.75rem;  /* 12 */
  --space-4:  1rem;     /* 16 */
  --space-5:  1.25rem;  /* 20 */
  --space-6:  1.5rem;   /* 24 */
  --space-8:  2rem;     /* 32 */
  --space-10: 2.5rem;   /* 40 */
  --space-12: 3rem;     /* 48 */
  --space-16: 4rem;     /* 64 */
  --space-20: 5rem;     /* 80 */
  --space-24: 6rem;     /* 96 */
  --space-32: 8rem;     /* 128 */

  /* ---- Section rhythm (marketing) ---- */
  --section-y: clamp(3.5rem, 2rem + 6vw, 7rem);  /* @kind spacing */
  --gutter:    clamp(1.25rem, 0.5rem + 3vw, 2.5rem);  /* @kind spacing */

  /* ---- Container widths ---- */
  --container-sm:  640px;  /* @kind spacing */
  --container-md:  820px;  /* @kind spacing */
  --container-lg:  1080px;  /* @kind spacing */
  --container-xl:  1240px;  /* @kind spacing */

  /* ---- Radius ---- */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;   /* default control radius */
  --radius-lg:   16px;
  --radius-xl:   22px;   /* cards */
  --radius-2xl:  30px;   /* feature panels */
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* ---- Control sizing ---- */
  --control-h-sm: 36px;  /* @kind spacing */
  --control-h-md: 44px;   /* @kind spacing */
  --control-h-lg: 52px;  /* @kind spacing */
  --border-w:     1px;  /* @kind spacing */
  --border-w-thick: 1.5px;  /* @kind spacing */
}

/* ============================================================
   Accidentright — Elevation & shadow tokens
   Soft, cool-tinted shadows on light; glow/ambient on dark.
   ============================================================ */

:root {
  /* Shadows are tinted with the slate/ink hue, never pure black */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06),
               0 2px 6px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 2px 4px rgba(15, 23, 42, 0.05),
               0 8px 20px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 4px 10px rgba(15, 23, 42, 0.06),
               0 18px 40px rgba(15, 23, 42, 0.12);
  --shadow-xl: 0 8px 18px rgba(15, 23, 42, 0.08),
               0 32px 64px rgba(15, 23, 42, 0.16);

  /* Brand / accent focus glows */
  --shadow-brand:  0 8px 24px rgba(37, 99, 235, 0.28);
  --shadow-accent: 0 10px 28px rgba(255, 138, 0, 0.30);

  /* Inset for sunken fields */
  --shadow-inset: inset 0 1px 2px rgba(15, 23, 42, 0.06);

  /* Hairline ring used alongside shadows on cards */
  --ring-hairline: 0 0 0 1px var(--border-subtle);
}

/* On dark surfaces, lean on ambient glow + light hairlines */
[data-theme="dark"],
.surface-dark {
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.45);
  --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 16px 44px rgba(0, 0, 0, 0.55);
  --shadow-xl: 0 30px 70px rgba(0, 0, 0, 0.6);
  --ring-hairline: 0 0 0 1px rgba(255, 255, 255, 0.08);
}

/* ============================================================
   Accidentright — Motion tokens
   Calm, confident, quick. Ease-out for entrances; no bounce on
   functional UI. Reassuring, never playful-jittery.
   ============================================================ */

:root {
  /* ---- Duration ---- */
  --dur-instant: 80ms;   /* @kind other */
  --dur-fast:    140ms;  /* @kind other */
  --dur-base:    220ms;  /* @kind other */
  --dur-slow:    360ms;  /* @kind other */
  --dur-slower:  560ms;  /* @kind other */

  /* ---- Easing ---- */
  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1);   /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);  /* @kind other */
  --ease-emphasis: cubic-bezier(0.16, 1, 0.3, 1);     /* @kind other */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);  /* @kind other */

  /* ---- Common transitions ---- */
  --transition-control: background-color var(--dur-fast) var(--ease-standard),
                        border-color var(--dur-fast) var(--ease-standard),
                        color var(--dur-fast) var(--ease-standard),
                        box-shadow var(--dur-fast) var(--ease-standard),
                        transform var(--dur-fast) var(--ease-out);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 0ms;  /* @kind other */
    --dur-fast: 0ms;  /* @kind other */
    --dur-base: 0ms;  /* @kind other */
    --dur-slow: 0ms;  /* @kind other */
    --dur-slower: 0ms;  /* @kind other */
  }
}