/* ==========================================================================
   SmartData Solutions — Design System (canonical)
   221 design tokens extracted verbatim from "SDS Design System (standalone).html"
   (2026-06-19). This file is the single source of truth for the website and is
   intended to be pushed back to the claude.ai/design project via /design-sync.
   ========================================================================== */

/* ---- FONTS (self-hosted variable woff2) ------------------------------- */
@font-face {
  font-family: "Space Grotesk";
  src: url("../fonts/SpaceGrotesk-var.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("../fonts/DMSans-var.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Brand primitives (exact brand-guide hex) ---- */
  --sds-mauve:        #322045; /* Primary — deep plum/purple */
  --sds-mauve-ink:    #1E1329; /* Plum ink — darkest purple surface */
  --sds-light-mauve:  #D097E7; /* Accent — light mauve / lavender */
  --sds-light-mauve-hi: #C686D9;
  --sds-light-mauve-lo: #DFB8EF;
  --sds-sunset:       #FE6E4E; /* Accent — sunset orange (the SDS pop) */
  --sds-sunset-hi:    #E85A3A; /* Coral — primary button rest */
  --sds-coral-hi:     #FE7253; /* Coral — signature primary tile */
  --sds-rust:         #83230E; /* Secondary accent — deep rust */
  --sds-off-black:    #19181A;
  --sds-dark-sage:    #28352B;
  --sds-light-sage:   #BCCCC1;
  --sds-off-white:    #E7ECE4; /* sage tint */
  --sds-paper:        #FFFFFF;
  --sds-bone:         #FAF9F3; /* warm paper */

  /* ---- Extended purple ramp ---- */
  --sds-purple-900: #1E1329;
  --sds-purple-800: #281A38;
  --sds-purple-700: #322045;
  --sds-purple-600: #422C55;
  --sds-purple-500: #5B3D7B;
  --sds-purple-400: #712191;
  --sds-purple-300: #9A6FC0;
  --sds-purple-200: #D097E7;
  --sds-purple-100: #E4DCE8;
  --sds-purple-50:  #F2EDF6;

  /* ---- Neutral / greyscale ramp ---- */
  --sds-grey-900: #19181A;
  --sds-grey-800: #2A2A2C;
  --sds-grey-700: #373739;
  --sds-grey-600: #545058;
  --sds-grey-500: #777179;
  --sds-grey-400: #A6A1AB;
  --sds-grey-300: #D2CDE6;
  --sds-grey-200: #E4E2DF;
  --sds-grey-100: #EFEEEC;
  --sds-grey-50:  #F7F6F4;

  /* ---- Semantic: surfaces ---- */
  --color-surface-primary:    var(--sds-paper);
  --color-surface-subtle:     var(--sds-off-white);
  --color-surface-raised:     var(--sds-paper);
  --color-surface-inverse:    var(--sds-mauve);
  --color-surface-inverse-2:  var(--sds-mauve-ink);
  --color-surface-brand:      var(--sds-sunset);
  --color-surface-sage:       var(--sds-off-white);
  --color-surface-overlay:    rgba(25, 24, 26, 0.55);

  /* ---- Semantic: text ---- */
  --color-text-default:       var(--sds-off-black);
  --color-text-muted:         var(--sds-grey-600);
  --color-text-subtle:        var(--sds-grey-500);
  --color-text-heading:       var(--sds-mauve);
  --color-text-on-dark:       var(--sds-paper);
  --color-text-on-dark-muted: rgba(255,255,255,0.72);
  --color-text-brand:         var(--sds-sunset);
  --color-text-on-brand:      var(--sds-paper);
  --color-text-link:          var(--sds-sunset);

  /* ---- Semantic: borders ---- */
  --color-border-default: var(--sds-grey-200);
  --color-border-strong:  var(--sds-grey-300);
  --color-border-on-dark: rgba(255,255,255,0.14);
  --color-border-brand:   var(--sds-sunset);
  --color-border-focus:   var(--sds-light-mauve);

  /* ---- Semantic: interaction ---- */
  --color-action-primary:        var(--sds-sunset);
  --color-action-primary-hover:  var(--sds-sunset-hi);
  --color-action-primary-active: var(--sds-rust);
  --color-action-secondary:        var(--sds-mauve);
  --color-action-secondary-hover:  var(--sds-purple-600);

  /* ---- Button palette (exact to sds-buttons.fig) ---- */
  --color-btn-primary:        var(--sds-sunset-hi);
  --color-btn-primary-hover:  var(--sds-sunset);
  --color-btn-primary-tile:   var(--sds-coral-hi);
  --color-btn-secondary:        var(--sds-light-mauve);
  --color-btn-secondary-hover:  var(--sds-light-mauve-lo);
  --color-btn-secondary-tile:   var(--sds-light-mauve-hi);
  --color-btn-secondary-text:   var(--sds-mauve);
  --color-btn-tertiary-body:    var(--sds-bone);
  --color-btn-tertiary-tile:    var(--sds-off-white);
  --color-btn-outline-border:        #897991;
  --color-btn-outline-border-hover:  var(--sds-purple-500);
  --color-hover-tint-dark:  rgba(255,255,255,0.08);
  --color-hover-tint-light: rgba(25,24,26,0.04);

  /* ---- Semantic: status ---- */
  --color-success:    #2E7D5B;
  --color-success-bg: #E6F1EC;
  --color-warning:    #C77A12;
  --color-warning-bg: #FBEFD9;
  --color-error:      #B23A1B;
  --color-error-bg:   #FBE6DF;
  --color-info:       var(--sds-purple-400);
  --color-info-bg:    var(--sds-purple-50);

  /* ---- Data-viz / pattern node colors ---- */
  --color-node-accent:  var(--sds-sunset);
  --color-node-neutral: rgba(255,255,255,0.55);
  --color-node-line:    rgba(255,255,255,0.18);

  /* ---- Type families ---- */
  --font-display: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "DM Sans", "Helvetica Neue", Arial, sans-serif;
  --font-doc:     Arial, "Helvetica Neue", sans-serif;

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

  /* ---- Font sizes ---- */
  --fs-d1: 128px;
  --fs-h1: 72px;
  --fs-h2: 60px;
  --fs-h3: 48px;
  --fs-h4: 32px;
  --fs-h5: 26px;
  --fs-h6: 20px;
  --fs-body-xl: 20px;
  --fs-body-lg: 18px;
  --fs-body-md: 16px;
  --fs-body-sm: 14px;
  --fs-body-xs: 12px;
  --fs-eyebrow: 12px;
  --fs-label: 12px;
  --fs-button-lg: 15px;
  --fs-button-sm: 14px;
  --fs-caption: 13px;

  /* ---- Line heights ---- */
  --lh-d1: 136px;
  --lh-h1: 78px;
  --lh-h2: 68px;
  --lh-h3: 56px;
  --lh-h4: 38px;
  --lh-h5: 32px;
  --lh-h6: 26px;
  --lh-body-xl: 30px;
  --lh-body-lg: 28px;
  --lh-body-md: 24px;
  --lh-body-sm: 20px;
  --lh-body-xs: 16px;
  --lh-eyebrow: 16px;
  --lh-label: 14px;
  --lh-button-lg: 15px;
  --lh-button-sm: 14px;
  --lh-caption: 18px;
  --lh-tight: 1.05;
  --lh-snug: 1.25;
  --lh-normal: 1.5;

  /* ---- Letter spacing ---- */
  --ls-d1: -2px;
  --ls-h1: -2px;
  --ls-h2: -2px;
  --ls-h3: -2px;
  --ls-h4: 0px;
  --ls-h5: 0px;
  --ls-h6: 0px;
  --ls-eyebrow: 2px;
  --ls-label: 1px;

  /* ---- Spacing ---- */
  --space-0: 0px;
  --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-28: 112px;
  --space-32: 128px;
  --space-component-sm: var(--space-3);
  --space-component-md: var(--space-4);
  --space-component-lg: var(--space-6);
  --space-component-xl: var(--space-8);
  --space-gutter: var(--space-6);
  --space-gutter-xxl: var(--space-20);
  --space-section: var(--space-28);
  --space-section-sm: var(--space-16);

  /* ---- Containers / grid / page ---- */
  --container-max: 1280px;
  --container-wide: 1440px;
  --container-prose: 720px;
  --page-margin: 80px;
  --page-margin-sm: 20px;
  --page-max: 1180px;
  --grid-columns: 12;
  --grid-gap: var(--space-6);

  /* ---- Breakpoints (reference) ---- */
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --bp-2xl: 1440px;

  /* ---- Radii ---- */
  --radius-none: 0px;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 20px;
  --radius-2xl: 28px;
  --radius-pill: 999px;
  --radius-button: var(--radius-sm);
  --radius-card: var(--radius-lg);
  --radius-input: var(--radius-md);

  /* ---- Borders ---- */
  --border-width: 1px;
  --border-width-strong: 1.5px;
  --border-divider: 1px;

  /* ---- Shadows ---- */
  --shadow-xs: 0 1px 2px rgba(25, 24, 26, 0.06);
  --shadow-sm: 0 1px 3px rgba(25, 24, 26, 0.08), 0 1px 2px rgba(25, 24, 26, 0.04);
  --shadow-md: 0 4px 12px rgba(50, 32, 69, 0.10), 0 2px 4px rgba(50, 32, 69, 0.06);
  --shadow-lg: 0 12px 28px rgba(50, 32, 69, 0.14), 0 4px 8px rgba(50, 32, 69, 0.06);
  --shadow-xl: 0 24px 56px rgba(30, 19, 41, 0.22);
  --shadow-focus: 0 0 0 3px rgba(208, 151, 231, 0.45);
  --shadow-brand-glow: 0 8px 28px rgba(254, 110, 78, 0.32);
  --shadow-card: var(--shadow-md);
  --shadow-elevated: var(--shadow-lg);

  /* ---- Opacity ---- */
  --opacity-disabled: 0.4;
  --opacity-muted: 0.64;
  --opacity-overlay: 0.55;
  --opacity-pattern: 0.25;

  /* ---- Motion ---- */
  --duration-instant: 80ms;
  --duration-fast: 150ms;
  --duration-base: 220ms;
  --duration-slow: 360ms;
  --duration-slower: 560ms;
  --ease-standard:   cubic-bezier(0.2, 0.0, 0.2, 1);
  --ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-exit:       cubic-bezier(0.4, 0.0, 1, 1);
  --ease-spring:     cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ---- Z-index scale ---- */
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 100;
  --z-header: 200;
  --z-dropdown: 300;
  --z-overlay: 400;
  --z-modal: 500;
  --z-toast: 600;
  --z-tooltip: 700;
}