/* =========================================================================
   Core Design System — Colour + Type tokens
   Brand-agnostic foundation. To rebrand a fork: replace the --brand-* ramp
   and the --font-* families.
   ========================================================================= */

/* ---- Font face: Inter (UI), Roboto (headings), Open Sans (body) ----------
   All three families ship locally as variable fonts in /fonts.
   Core does not ship icons and must not load a CDN. --font-icon is a slot
   for a fork that adds its own icon font. */

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 75% 125%;
  font-display: swap;
  src: url("fonts/Roboto-VariableFont_wdth_wght.ttf") format("truetype-variations"),
       url("fonts/Roboto-VariableFont_wdth_wght.ttf") format("truetype");
}
@font-face {
  font-family: "Roboto";
  font-style: italic;
  font-weight: 100 900;
  font-stretch: 75% 125%;
  font-display: swap;
  src: url("fonts/Roboto-Italic-VariableFont_wdth_wght.ttf") format("truetype-variations"),
       url("fonts/Roboto-Italic-VariableFont_wdth_wght.ttf") format("truetype");
}
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 300 800;
  font-stretch: 75% 125%;
  font-display: swap;
  src: url("fonts/OpenSans-VariableFont_wdth_wght.ttf") format("truetype-variations"),
       url("fonts/OpenSans-VariableFont_wdth_wght.ttf") format("truetype");
}
@font-face {
  font-family: "Open Sans";
  font-style: italic;
  font-weight: 300 800;
  font-stretch: 75% 125%;
  font-display: swap;
  src: url("fonts/OpenSans-Italic-VariableFont_wdth_wght.ttf") format("truetype-variations"),
       url("fonts/OpenSans-Italic-VariableFont_wdth_wght.ttf") format("truetype");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/Inter-VariableFont_opsz_wght.ttf") format("truetype-variations"),
       url("fonts/Inter-VariableFont_opsz_wght.ttf") format("truetype");
}
@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/Inter-Italic-VariableFont_opsz_wght.ttf") format("truetype-variations"),
       url("fonts/Inter-Italic-VariableFont_opsz_wght.ttf") format("truetype");
}

:root {
  /* ============================================================
     COLOUR — Primary "Brand" (PLACEHOLDER — override per fork)
     The single hue a fork replaces. These values are a neutral
     indigo-slate placeholder, not a brand decision.
     ============================================================ */
  --brand-800: #1E2333;
  --brand-700: #2B3350;
  --brand-600: #3C4673;   /* PRIMARY — replace to rebrand */
  --brand-500: #515C90;
  --brand-400: #6E79A8;
  --brand-300: #9AA2C4;
  --brand-200: #D9DCEA;
  --brand-100: #E9EBF3;
  --brand-50:  #F4F5F9;
  --brand-25:  #FAFAFC;

  /* ============================================================
     COLOUR — Neutral spine (cool grey, authored for Core)
     --neutral-400 meets 4.5:1 on white (placeholder / subtle text).
     --neutral-300 meets 3:1 on white (non-text UI / input border).
     ============================================================ */
  --neutral-800: #262831;
  --neutral-700: #353741;
  --neutral-600: #484A56;
  --neutral-500: #595C69;
  --neutral-400: #6E7181;
  --neutral-300: #8A8C99;
  --neutral-200: #DDDEE3;
  --neutral-100: #EBECEF;
  --neutral-50:  #F5F5F7;
  --neutral-25:  #FAFAFB;

  /* ============================================================
     COLOUR — Black tints and white
     ============================================================ */

  --black-900: #000000;
  --black-800: #1A1A1A;
  --black-700: #333333;
  --black-600: #4D4D4D;
  --black-500: #666666;
  --black-400: #808080;
  --black-300: #999999;
  --black-200: #B3B3B3;
  --black-100: #CCCCCC;
  --black-50:  #E6E6E6;
  --black-25:  #F3F3F3;
  --white:     #FFFFFF;

  /* ============================================================
     COLOUR — Semantic
     ============================================================ */
  --info-700:    #14447B;
  --info-600:    #1D589A;
  --info-500:    #2767B0;
  --info-100:    #E7EFF8;
  --info-50:     #F4F7FB;

  --success-700: #1C5F3F;
  --success-600: #25744F;
  --success-500: #268257;
  --success-100: #EAF6F0;
  --success-50:  #F5FAF8;

  --warning-700: #9B5608;
  --warning-600: #A55C09;
  --warning-500: #D5770B;
  --warning-400: #F3A449;
  --warning-100: #FBF2DF;
  --warning-50:  #FDFAF1;

  --error-700:   #911A12;
  --error-600:   #AB2117;
  --error-500:   #C12A1F;
  --error-100:   #FBEBE9;
  --error-50:    #FCF6F5;

  /* Focus ring (used on every interactive surface) */
  --focus-500:   #B900DA;

  /* ============================================================
     SEMANTIC ROLES — what designs actually reach for
     ============================================================ */
  --bg-base:        var(--white);
  --bg-subtle:      var(--neutral-25);
  --bg-muted:       var(--neutral-50);
  --bg-canvas:      var(--neutral-25);
  --bg-inverse:     var(--brand-600);
  --bg-disabled:    var(--neutral-100);
  --bg-hover-subtle: var(--neutral-50);
  --bg-info:        var(--info-100);
  --bg-success:     var(--success-100);
  --bg-warning:     var(--warning-100);
  --bg-error:       var(--error-100);
  --bg-error-subtle: var(--error-50);
  --bg-error-strong: var(--error-600);
  --bg-error-strong-hover: var(--error-500);

  --fg-default:     var(--neutral-800);   /* body text */
  --fg-strong:      var(--black-800);     /* headings */
  --fg-muted:       var(--black-500);     /* supporting copy */
  --fg-subtle:      var(--neutral-400);
  --fg-disabled:    var(--neutral-400);
  --fg-placeholder: var(--neutral-400);   /* 4.5:1 on white */
  --fg-on-primary:  var(--white);
  --fg-on-inverse:  var(--white);
  --fg-on-error:    var(--white);
  --fg-link:        var(--brand-600);
  --fg-link-hover:  var(--brand-700);
  --fg-info:        var(--info-700);
  --fg-success:     var(--success-700);
  --fg-warning:     var(--warning-700);
  --fg-error:       var(--error-700);

  --border-default: var(--neutral-200);   /* decorative only; do not use as a control edge */
  --border-strong:  var(--neutral-300);   /* 3:1 on white — input and control borders */
  --border-control: var(--border-strong); /* public alias of --border-strong */
  --border-subtle:  var(--neutral-100);
  --border-focus:   var(--focus-500);     /* public focus colour */
  --focus-ring:     2px solid var(--border-focus); /* public keyboard-focus outline */
  --border-disabled: var(--neutral-200);
  --border-hover:   var(--neutral-700);
  --border-error:   var(--error-600);

  --primary:        var(--brand-600);
  --primary-hover:  var(--brand-700);
  --primary-active: var(--brand-800);
  --primary-bg:     var(--brand-50);
  --primary-tint:   var(--brand-100);
  --primary-strong: var(--brand-700);

  /* ============================================================
     TYPOGRAPHY — families & weights
     ============================================================ */
  --font-heading:   "Roboto", "Helvetica Neue", Arial, sans-serif;
  --font-body:      "Open Sans", "Segoe UI", Arial, sans-serif;
  --font-ui:        "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-mono:      ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --font-icon:      inherit;

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

  /* ============================================================
     TYPOGRAPHY — scale
     Base: 16px (--text-body-m). Every font-size and line-height
     snaps to the 4px grid. Body: 12, 14, 16, 18. Headings: 20,
     24, 28, 32, 36. Display: 44, 52. Leading is size plus 4px or
     8px, except display-m (52/56) and body-xs (12/20).
     ============================================================ */
  --text-display-m:  52px;   --lh-display-m:  56px;
  --text-display-s:  44px;   --lh-display-s:  48px;
  --text-h-xl:       52px;   --lh-h-xl:       62px;
  --text-h-l:        36px;   --lh-h-l:        44px;
  --text-h-m:        32px;   --lh-h-m:        40px;
  --text-h-s:        28px;   --lh-h-s:        36px;
  --text-h-xs:       24px;   --lh-h-xs:       32px;
  --text-h-xxs:      20px;   --lh-h-xxs:      28px;

  --text-body-l:     18px;   --lh-body-l:     28px;
  --text-body-m:     16px;   --lh-body-m:     24px;
  --text-body-s:     14px;   --lh-body-s:     20px;
  --text-body-xs:    12px;   --lh-body-xs:    20px;

  --tracking-tight:    -0.02em;
  --tracking-h-xl:     -0.01em;
  --tracking-button:    0.5px;
  --tracking-eyebrow:   0.15em;

  /* ============================================================
     SPACING SCALE — $spacing-* tokens (4px base, incremental)
     ============================================================ */
  --space-xx-sm:  4px;
  --space-x-sm:   8px;
  --space-sm:    12px;
  --space-md:    16px;
  --space-big:   20px;
  --space-x-big: 24px;
  --space-xx-big:28px;
  --space-xxx-big:32px;
  --space-lg:    40px;
  --space-x-lg:  48px;
  --space-xx-lg: 64px;
  --space-xxx-lg:80px;
  --space-huge:  96px;
  --space-x-huge:128px;
  --space-xx-huge:160px;
  --space-xxx-huge:192px;

  /* ============================================================
     RADII
     Steps on the 4px grid: 4, 8, 12, 16. Cards use --radius-sm
     (8px). --radius-pill is 200px so a capsule stays fully round
     at every control height Core ships (largest is --control-height-lg).
     ============================================================ */
  --radius-xs:  4px;
  --radius-sm:  8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 200px;

  /* ============================================================
     ELEVATION — Drop shadow scale
     ============================================================ */
  --shadow-none: none;
  --shadow-xs:   0px 2px 4px 0px rgba(0, 0, 0, 0.10);
  --shadow-sm:   0px 4px 8px 0px rgba(0, 0, 0, 0.10);
  --shadow-md:   0px 8px 16px 0px rgba(0, 0, 0, 0.10);
  --shadow-lg:   0px 12px 24px 0px rgba(0, 0, 0, 0.10);

  /* ============================================================
     LAYOUT
     ============================================================ */
  --container-max: 1280px;
  --container-pad: 24px;

  /* ============================================================
     CONTROL SIZING
     --control-height is the default interactive minimum (44px).
     --control-height-sm is compact (32px), not the default.
     --hit-target aliases the default. Components consume these.
     --motion-duration is 120ms; reduced-motion sets it to 0ms.
     ============================================================ */
  --control-height:    44px;
  --control-height-sm: 32px;
  --control-height-lg: 48px;
  --control-pad-y:     12px;
  --control-pad-x:     20px;
  --control-pad-y-sm:  8px;
  --control-pad-x-sm:  16px;
  --control-pad-y-lg:  16px;
  --control-pad-x-lg:  24px;
  --hit-target:        var(--control-height);
  --motion-duration:   120ms;
  --motion-easing:     linear;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-duration: 0ms;
  }
}

/* =========================================================================
   ELEMENT BASELINE
   Generic, opt-in styles for raw HTML elements. Apply via .ds scope.
   ========================================================================= */
.ds {
  font-family: var(--font-body);
  font-size: var(--text-body-m);
  line-height: var(--lh-body-m);
  color: var(--fg-default);
  background: var(--bg-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.ds h1, .ds .h-display-m,
.ds h2, .ds .h-display-s,
.ds .h-xl, .ds .h-l,
.ds .h-m, .ds .h-s,
.ds .h-xs, .ds .h-xxs {
  font-family: var(--font-heading);
  font-weight: var(--fw-light);
  color: var(--fg-strong);
  letter-spacing: var(--tracking-tight);
  margin: 0;
  text-wrap: balance;
}

.ds h1, .ds .h-display-m { font-size: var(--text-display-m); line-height: var(--lh-display-m); }
.ds .h-display-s             { font-size: var(--text-display-s); line-height: var(--lh-display-s); }
.ds .h-xl                    { font-size: var(--text-h-xl);      line-height: var(--lh-h-xl);  letter-spacing: var(--tracking-h-xl); }
.ds .h-l, .ds h2         { font-size: var(--text-h-l);       line-height: var(--lh-h-l);  font-weight: var(--fw-regular); }
.ds .h-m, .ds h3         { font-size: var(--text-h-m);       line-height: var(--lh-h-m);  font-weight: var(--fw-regular); }
.ds .h-s, .ds h4         { font-size: var(--text-h-s);       line-height: var(--lh-h-s);  font-weight: var(--fw-medium); }
.ds .h-xs, .ds h5        { font-size: var(--text-h-xs);      line-height: var(--lh-h-xs); font-weight: var(--fw-medium); }
.ds .h-xxs, .ds h6       { font-size: var(--text-h-xxs);     line-height: var(--lh-h-xxs);font-weight: var(--fw-medium); }

.ds p, .ds .body-m { font-size: var(--text-body-m); line-height: var(--lh-body-m); }
.ds .body-l            { font-size: var(--text-body-l); line-height: var(--lh-body-l); }
.ds .body-s            { font-size: var(--text-body-s); line-height: var(--lh-body-s); }
.ds .body-xs           { font-size: var(--text-body-xs); line-height: var(--lh-body-xs); }

.ds a {
  color: var(--fg-link);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.ds a:hover { color: var(--fg-link-hover); text-decoration-thickness: 2px; }
.ds a:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
  border-radius: 2px;
}

.ds .eyebrow {
  font-family: var(--font-ui);
  font-size: var(--text-body-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-muted);
}