/* ===========================================================================
   Sparkle Design System — colors_and_type.css
   v0.1 · 2 May 2026
   =========================================================================== */

/* ---------- Web fonts ---------------------------------------------------
   All fonts self-hosted from /fonts (brand files uploaded by the team).
   - Inter (text optical size) for product UI
   - Inter Display (display optical size) for marketing-only display sizes
   - JetBrains Mono for IDs, codes, timestamps, money
   We declare the variable file FIRST and the static cuts second so
   browsers that support variable fonts pick the variable; older ones
   fall back to the matching static weight.
   ----------------------------------------------------------------------- */

/* Inter — variable (preferred) */
@font-face { font-family: 'Inter'; font-style: normal;  font-weight: 100 900; font-display: swap; src: url('fonts/InterVariable.woff2') format('woff2-variations'); }
@font-face { font-family: 'Inter'; font-style: italic;  font-weight: 100 900; font-display: swap; src: url('fonts/InterVariable-Italic.woff2') format('woff2-variations'); }

/* Inter — static cuts (fallbacks for older browsers and explicit weights) */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100; font-display: swap; src: url('fonts/Inter-Thin.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: italic; font-weight: 100; font-display: swap; src: url('fonts/Inter-ThinItalic.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 200; font-display: swap; src: url('fonts/Inter-ExtraLight.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: italic; font-weight: 200; font-display: swap; src: url('fonts/Inter-ExtraLightItalic.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 300; font-display: swap; src: url('fonts/Inter-Light.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: italic; font-weight: 300; font-display: swap; src: url('fonts/Inter-LightItalic.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/Inter-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: italic; font-weight: 400; font-display: swap; src: url('fonts/Inter-Italic.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/Inter-Medium.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: italic; font-weight: 500; font-display: swap; src: url('fonts/Inter-MediumItalic.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/Inter-SemiBold.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: italic; font-weight: 600; font-display: swap; src: url('fonts/Inter-SemiBoldItalic.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/Inter-Bold.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: italic; font-weight: 700; font-display: swap; src: url('fonts/Inter-BoldItalic.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 800; font-display: swap; src: url('fonts/Inter-ExtraBold.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: italic; font-weight: 800; font-display: swap; src: url('fonts/Inter-ExtraBoldItalic.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 900; font-display: swap; src: url('fonts/Inter-Black.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: italic; font-weight: 900; font-display: swap; src: url('fonts/Inter-BlackItalic.woff2') format('woff2'); }

/* Inter Display — display optical size, marketing only */
@font-face { font-family: 'Inter Display'; font-style: normal; font-weight: 100; font-display: swap; src: url('fonts/InterDisplay-Thin.woff2') format('woff2'); }
@font-face { font-family: 'Inter Display'; font-style: italic; font-weight: 100; font-display: swap; src: url('fonts/InterDisplay-ThinItalic.woff2') format('woff2'); }
@font-face { font-family: 'Inter Display'; font-style: normal; font-weight: 200; font-display: swap; src: url('fonts/InterDisplay-ExtraLight.woff2') format('woff2'); }
@font-face { font-family: 'Inter Display'; font-style: italic; font-weight: 200; font-display: swap; src: url('fonts/InterDisplay-ExtraLightItalic.woff2') format('woff2'); }
@font-face { font-family: 'Inter Display'; font-style: normal; font-weight: 300; font-display: swap; src: url('fonts/InterDisplay-Light.woff2') format('woff2'); }
@font-face { font-family: 'Inter Display'; font-style: italic; font-weight: 300; font-display: swap; src: url('fonts/InterDisplay-LightItalic.woff2') format('woff2'); }
@font-face { font-family: 'Inter Display'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/InterDisplay-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Inter Display'; font-style: italic; font-weight: 400; font-display: swap; src: url('fonts/InterDisplay-Italic.woff2') format('woff2'); }
@font-face { font-family: 'Inter Display'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/InterDisplay-Medium.woff2') format('woff2'); }
@font-face { font-family: 'Inter Display'; font-style: italic; font-weight: 500; font-display: swap; src: url('fonts/InterDisplay-MediumItalic.woff2') format('woff2'); }
@font-face { font-family: 'Inter Display'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/InterDisplay-SemiBold.woff2') format('woff2'); }
@font-face { font-family: 'Inter Display'; font-style: italic; font-weight: 600; font-display: swap; src: url('fonts/InterDisplay-SemiBoldItalic.woff2') format('woff2'); }
@font-face { font-family: 'Inter Display'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/InterDisplay-Bold.woff2') format('woff2'); }
@font-face { font-family: 'Inter Display'; font-style: italic; font-weight: 700; font-display: swap; src: url('fonts/InterDisplay-BoldItalic.woff2') format('woff2'); }
@font-face { font-family: 'Inter Display'; font-style: normal; font-weight: 800; font-display: swap; src: url('fonts/InterDisplay-ExtraBold.woff2') format('woff2'); }
@font-face { font-family: 'Inter Display'; font-style: italic; font-weight: 800; font-display: swap; src: url('fonts/InterDisplay-ExtraBoldItalic.woff2') format('woff2'); }
@font-face { font-family: 'Inter Display'; font-style: normal; font-weight: 900; font-display: swap; src: url('fonts/InterDisplay-Black.woff2') format('woff2'); }
@font-face { font-family: 'Inter Display'; font-style: italic; font-weight: 900; font-display: swap; src: url('fonts/InterDisplay-BlackItalic.woff2') format('woff2'); }

/* JetBrains Mono — self-hosted (16 cuts: thin → extra-bold, romans + italics) */
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 100; font-display: swap; src: url('fonts/JetBrainsMono-Thin.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: italic; font-weight: 100; font-display: swap; src: url('fonts/JetBrainsMono-ThinItalic.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 200; font-display: swap; src: url('fonts/JetBrainsMono-ExtraLight.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: italic; font-weight: 200; font-display: swap; src: url('fonts/JetBrainsMono-ExtraLightItalic.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 300; font-display: swap; src: url('fonts/JetBrainsMono-Light.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: italic; font-weight: 300; font-display: swap; src: url('fonts/JetBrainsMono-LightItalic.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/JetBrainsMono-Regular.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: italic; font-weight: 400; font-display: swap; src: url('fonts/JetBrainsMono-Italic.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/JetBrainsMono-Medium.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: italic; font-weight: 500; font-display: swap; src: url('fonts/JetBrainsMono-MediumItalic.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/JetBrainsMono-SemiBold.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: italic; font-weight: 600; font-display: swap; src: url('fonts/JetBrainsMono-SemiBoldItalic.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/JetBrainsMono-Bold.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: italic; font-weight: 700; font-display: swap; src: url('fonts/JetBrainsMono-BoldItalic.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 800; font-display: swap; src: url('fonts/JetBrainsMono-ExtraBold.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: italic; font-weight: 800; font-display: swap; src: url('fonts/JetBrainsMono-ExtraBoldItalic.woff2') format('woff2'); }

/* ===========================================================================
   1. ROOT TOKENS — Light theme (default)
   =========================================================================== */
:root {
  color-scheme: light;

  /* ---- Brand: Harbour (primary) ----------------------------------------
     A deep blue-teal — serious, dependable, suited to UK FM operators
     (housing associations, NHS trusts, retail estates). Reads
     professional without falling into Microsoft-blue territory; clears
     WCAG AA on white at 600+. The Ember name is preserved as an alias
     below so existing components keep working — token names will be
     migrated in v0.2. */
  --harbour-50:  #EEF5F7;
  --harbour-100: #D6E6EB;
  --harbour-200: #ADCED7;
  --harbour-300: #7AAEBC;
  --harbour-400: #498D9F;
  --harbour-500: #1F6F84;
  --harbour-600: #0E5A6E;   /* primary action — AA on white, AAA on slate-50 */
  --harbour-700: #0A4757;
  --harbour-800: #073644;
  --harbour-900: #052631;

  /* ---- Ember aliases (deprecated — to be removed in v0.2) -------------- */
  --ember-50:  var(--harbour-50);
  --ember-100: var(--harbour-100);
  --ember-200: var(--harbour-200);
  --ember-300: var(--harbour-300);
  --ember-400: var(--harbour-400);
  --ember-500: var(--harbour-500);
  --ember-600: var(--harbour-600);
  --ember-700: var(--harbour-700);
  --ember-800: var(--harbour-800);
  --ember-900: var(--harbour-900);

  /* ---- Neutrals: Slate (carries the product) --------------------------- */
  --slate-0:   #FFFFFF;
  --slate-25:  #FBFBFC;
  --slate-50:  #F5F6F8;
  --slate-100: #ECEEF2;
  --slate-200: #DDE0E6;
  --slate-300: #C2C7D0;
  --slate-400: #9097A3;
  --slate-500: #686F7D;
  --slate-600: #4A515D;
  --slate-700: #353A44;
  --slate-800: #20242C;
  --slate-900: #131620;
  --slate-950: #0B0D10;

  /* ---- Semantics ------------------------------------------------------- */
  --moss-50:   #ECF5F0;
  --moss-200:  #BFDDCD;
  --moss-500:  #3E9676;
  --moss-600:  #2F7D5C;
  --moss-700:  #25634A;

  --amber-50:  #FCF3E5;
  --amber-200: #F5D5A0;
  --amber-500: #D97A0A;
  --amber-600: #B45309;
  --amber-700: #8A3F08;

  --crimson-50:  #FCEDEC;
  --crimson-200: #F4C8C5;
  --crimson-500: #D7372A;
  --crimson-600: #B42318;
  --crimson-700: #8C1A12;

  --steel-50:  #EAF2FA;
  --steel-200: #B8D2EB;
  --steel-500: #2987D1;
  --steel-600: #1F6FB2;
  --steel-700: #185989;

  /* ---- Data-viz qualitative palette (CB-safe Deuter/Protan) ------------ */
  --viz-1: #1F6FB2;  /* steel    */
  --viz-2: #C7522A;  /* ember    */
  --viz-3: #2F7D5C;  /* moss     */
  --viz-4: #8856A7;  /* mauve    */
  --viz-5: #D97A0A;  /* amber    */
  --viz-6: #4A515D;  /* slate    */
  --viz-7: #6FA8DC;  /* sky      */
  --viz-8: #A85751;  /* clay     */

  /* ===========================================================================
     2. SEMANTIC TOKENS — what product code references
     =========================================================================== */

  /* Backgrounds & surfaces */
  --bg-app:           var(--slate-25);
  --bg-canvas:        var(--slate-50);
  --surface:          var(--slate-0);
  --surface-hover:    var(--slate-50);
  --surface-elevated: var(--slate-0);
  --surface-sunken:   var(--slate-100);
  --surface-inverse:  var(--slate-900);

  /* Foregrounds */
  --fg-primary:    var(--slate-900);
  --fg-secondary:  var(--slate-600);
  --fg-muted:      var(--slate-500);
  --fg-disabled:   var(--slate-400);
  --fg-inverse:    var(--slate-0);
  --fg-on-accent:  var(--slate-0);

  /* Borders */
  --border:        var(--slate-200);
  --border-strong: var(--slate-300);
  --border-inverse:var(--slate-700);

  /* Accent */
  --accent:        var(--ember-600);
  --accent-hover:  var(--ember-700);
  --accent-soft-bg:var(--ember-50);
  --accent-soft-fg:var(--ember-700);

  /* Status — bg / fg / border triples */
  --success-bg: var(--moss-50);    --success-fg: var(--moss-700);    --success-border: var(--moss-200);    --success-solid: var(--moss-600);
  --warning-bg: var(--amber-50);   --warning-fg: var(--amber-700);   --warning-border: var(--amber-200);   --warning-solid: var(--amber-600);
  --danger-bg:  var(--crimson-50); --danger-fg:  var(--crimson-700); --danger-border:  var(--crimson-200); --danger-solid:  var(--crimson-600);
  --info-bg:    var(--steel-50);   --info-fg:    var(--steel-700);   --info-border:    var(--steel-200);   --info-solid:    var(--steel-600);

  /* Focus ring */
  --focus-ring:    0 0 0 2px var(--bg-app), 0 0 0 4px var(--ember-500);

  /* ===========================================================================
     3. SPACING — 4px base
     =========================================================================== */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* Radii */
  --radius-sm:  4px;
  --radius-md:  6px;
  --radius-lg:  8px;
  --radius-xl:  12px;
  --radius-2xl: 16px;
  --radius-full:9999px;

  /* Shadows — narrow Y bias, low alpha */
  --shadow-xs: 0 1px 2px rgba(11, 13, 16, 0.04);
  --shadow-sm: 0 1px 2px rgba(11, 13, 16, 0.05), 0 1px 3px rgba(11, 13, 16, 0.06);
  --shadow-md: 0 2px 4px rgba(11, 13, 16, 0.05), 0 4px 8px rgba(11, 13, 16, 0.06);
  --shadow-lg: 0 4px 8px rgba(11, 13, 16, 0.06), 0 12px 24px rgba(11, 13, 16, 0.08);
  --shadow-xl: 0 8px 16px rgba(11, 13, 16, 0.08), 0 24px 48px rgba(11, 13, 16, 0.12);

  /* ===========================================================================
     4. TYPOGRAPHY
     =========================================================================== */
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Inter Display', 'Inter', ui-sans-serif, system-ui, sans-serif; /* display optical size — marketing only */
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Type scale — size / line-height */
  --text-xs:      12px;   --lh-xs:      16px;
  --text-sm:      13px;   --lh-sm:      18px;
  --text-base:    14px;   --lh-base:    20px;
  --text-md:      15px;   --lh-md:      22px;
  --text-lg:      17px;   --lh-lg:      24px;
  --text-xl:      20px;   --lh-xl:      28px;
  --text-2xl:     24px;   --lh-2xl:     32px;
  --text-3xl:     30px;   --lh-3xl:     38px;
  --text-4xl:     36px;   --lh-4xl:     44px;
  --text-display: 44px;   --lh-display: 52px;

  /* Weights */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* Tracking */
  --tracking-tight: -0.012em;
  --tracking-base:   0;
  --tracking-wide:   0.04em;
  --tracking-mono:  -0.005em;

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-micro:  150ms;
  --dur-layout: 250ms;
  --dur-hero:   400ms;
}

/* ===========================================================================
   5. DARK THEME — first-class
   =========================================================================== */
:root[data-theme="dark"],
.dark {
  color-scheme: dark;

  --bg-app:           var(--slate-950);
  --bg-canvas:        var(--slate-900);
  --surface:          var(--slate-800);
  --surface-hover:    #262B34;
  --surface-elevated: #2A2F39;
  --surface-sunken:   var(--slate-900);
  --surface-inverse:  var(--slate-0);

  --fg-primary:    #ECEEF2;
  --fg-secondary:  #B7BCC7;
  --fg-muted:      #8B919E;
  --fg-disabled:   var(--slate-600);
  --fg-inverse:    var(--slate-900);
  --fg-on-accent:  #FFFFFF;

  --border:        #2E333D;
  --border-strong: #3B414C;
  --border-inverse:var(--slate-200);

  --accent:        var(--ember-500);
  --accent-hover:  var(--ember-400);
  --accent-soft-bg:#2C1D17;
  --accent-soft-fg:#F1B79C;

  --success-bg: #14302A;  --success-fg: #8DD2B6;  --success-border: #1F4A3D;  --success-solid: var(--moss-500);
  --warning-bg: #3A2611;  --warning-fg: #F5C481;  --warning-border: #5A3A19;  --warning-solid: var(--amber-500);
  --danger-bg:  #3A1A18;  --danger-fg:  #F5A7A2;  --danger-border:  #5A2622;  --danger-solid:  var(--crimson-500);
  --info-bg:    #102A40;  --info-fg:    #9AC4ED;  --info-border:    #1B4368;  --info-solid:    var(--steel-500);

  --focus-ring: 0 0 0 2px var(--bg-app), 0 0 0 4px var(--ember-400);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.3), 0 4px 8px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.35), 0 12px 24px rgba(0, 0, 0, 0.45);
  --shadow-xl: 0 8px 16px rgba(0, 0, 0, 0.4), 0 24px 48px rgba(0, 0, 0, 0.55);
}

/* ===========================================================================
   6. RESET-LIGHT + BASE
   =========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--lh-base);
  color: var(--fg-primary);
  background: var(--bg-app);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv11', 'ss01', 'ss03';
  letter-spacing: var(--tracking-base);
}

/* ===========================================================================
   7. SEMANTIC TYPE STYLES — apply via class
   =========================================================================== */
.t-display, h1.t-display {
  font-family: var(--font-display);
  font-size: var(--text-display);
  line-height: var(--lh-display);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-primary);
}
h1, .t-h1 {
  font-size: var(--text-3xl); line-height: var(--lh-3xl);
  font-weight: var(--weight-semibold); letter-spacing: var(--tracking-tight);
  color: var(--fg-primary); margin: 0;
}
h2, .t-h2 {
  font-size: var(--text-2xl); line-height: var(--lh-2xl);
  font-weight: var(--weight-semibold); letter-spacing: var(--tracking-tight);
  color: var(--fg-primary); margin: 0;
}
h3, .t-h3 {
  font-size: var(--text-xl); line-height: var(--lh-xl);
  font-weight: var(--weight-semibold); color: var(--fg-primary); margin: 0;
}
h4, .t-h4 {
  font-size: var(--text-lg); line-height: var(--lh-lg);
  font-weight: var(--weight-semibold); color: var(--fg-primary); margin: 0;
}
.t-body, p {
  font-size: var(--text-base); line-height: var(--lh-base);
  color: var(--fg-primary); margin: 0;
}
.t-body-lg { font-size: var(--text-md); line-height: var(--lh-md); color: var(--fg-primary); }
.t-body-sm { font-size: var(--text-sm); line-height: var(--lh-sm); color: var(--fg-secondary); }
.t-caption  { font-size: var(--text-xs); line-height: var(--lh-xs); color: var(--fg-muted); letter-spacing: var(--tracking-wide); text-transform: uppercase; font-weight: var(--weight-medium); }
.t-label    { font-size: var(--text-sm); line-height: var(--lh-sm); color: var(--fg-secondary); font-weight: var(--weight-medium); }

.t-mono, code, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.92em;
  letter-spacing: var(--tracking-mono);
  font-feature-settings: 'zero', 'ss02';
}
.t-num { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }

/* ===========================================================================
   8. DENSITY MODE
   =========================================================================== */
[data-density="compact"] {
  --row-py: 6px;
  --field-h: 30px;
  --button-h: 30px;
  --gap: var(--space-2);
}
[data-density="comfortable"], :root {
  --row-py: 10px;
  --field-h: 36px;
  --button-h: 36px;
  --gap: var(--space-3);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}