/* ============================================================================
   SAPE UI Kit · Foundations (base + theme)
   ----------------------------------------------------------------------------
   Values are the APPROVED SAPE brand primitives sourced verbatim from
   02_Design_System (color scales, spacing, type, radius, size, motion).
   This kit export additionally:
     · RESOLVES the elevation.* and font.role.* tokens that the upstream
       02 CSS export emitted unresolved (e.g. literal "{shadow.level_1}").
     · SPLITS theme-varying semantic aliases into :root[data-theme="light"]
       and :root[data-theme="dark"] so a single stylesheet drives both themes.
     · CORRECTS the dark theme: upstream reused light semantic subtle/text
       tints on dark surfaces (near-white alert boxes); dark-appropriate
       tints are provided here.
     · REFINES elevation into layered (ambient + key) shadows for depth.
   No brand hue, no logo color and no approved base value is altered.
   ============================================================================ */

/* ---- Theme-agnostic primitives ------------------------------------------ */
:root {
  color-scheme: light dark;

  /* border */
  --sape-border-style-solid: solid; /* @kind other */
  --sape-border-width-hairline: 1px;
  --sape-border-width-strong: 2px;
  --sape-border-width-heavy: 3px;

  /* radius */
  --sape-radius-none: 0px;
  --sape-radius-xs: 2px;
  --sape-radius-sm: 4px;
  --sape-radius-md: 6px;
  --sape-radius-lg: 8px;
  --sape-radius-xl: 12px;
  --sape-radius-2xl: 16px;
  --sape-radius-full: 999px;

  /* spacing */
  --sape-spacing-0: 0px;
  --sape-spacing-1: 4px;
  --sape-spacing-2: 8px;
  --sape-spacing-3: 12px;
  --sape-spacing-4: 16px;
  --sape-spacing-5: 20px;
  --sape-spacing-6: 24px;
  --sape-spacing-8: 32px;
  --sape-spacing-10: 40px;
  --sape-spacing-12: 48px;
  --sape-spacing-16: 64px;
  --sape-spacing-20: 80px;
  --sape-spacing-24: 96px;

  /* density */
  --sape-density-compact: 8px;
  --sape-density-standard: 12px;
  --sape-density-comfortable: 16px;

  /* size */
  --sape-size-control-sm: 32px;
  --sape-size-control-md: 40px;
  --sape-size-control-lg: 48px;
  --sape-size-control-touch-min: 44px;
  --sape-size-icon-sm: 16px;
  --sape-size-icon-md: 20px;
  --sape-size-icon-lg: 24px;
  --sape-size-content-measure: 720px;
  --sape-size-content-wide: 1180px;
  --sape-size-content-app: 1440px;

  /* font families */
  --sape-font-family-primary: "IBM Plex Sans", "Segoe UI", Aptos, Arial, sans-serif;
  --sape-font-family-secondary: "Inter", "Segoe UI", Aptos, Arial, sans-serif;
  --sape-font-family-mono: "JetBrains Mono", Consolas, "SFMono-Regular", Menlo, monospace;
  --sape-font-family-logo-descriptor: "Chakra Petch", "Segoe UI", sans-serif;
  --sape-font-family-system-sans: "Segoe UI", Aptos, Arial, sans-serif;
  --sape-font-family-system-mono: Consolas, "SFMono-Regular", Menlo, monospace;

  /* font sizes */
  --sape-font-size-10: 10px;
  --sape-font-size-12: 12px;
  --sape-font-size-14: 14px;
  --sape-font-size-16: 16px;
  --sape-font-size-18: 18px;
  --sape-font-size-20: 20px;
  --sape-font-size-24: 24px;
  --sape-font-size-32: 32px;
  --sape-font-size-40: 40px;
  --sape-font-size-48: 48px;
  --sape-font-size-64: 64px;

  /* font weights */
  --sape-font-weight-regular: 400;
  --sape-font-weight-medium: 500;
  --sape-font-weight-semibold: 600;
  --sape-font-weight-bold: 700;

  /* line heights + letter spacing */
  --sape-font-line-height-tight: 1.12;
  --sape-font-line-height-snug: 1.25;
  --sape-font-line-height-normal: 1.5;
  --sape-font-line-height-relaxed: 1.65;
  --sape-font-letter-spacing-normal: 0;
  --sape-font-letter-spacing-label: 0.01em;
  --sape-font-letter-spacing-code: 0;

  /* type roles — RESOLVED (upstream export left these as literal refs) */
  --sape-font-role-display-family: var(--sape-font-family-primary);
  --sape-font-role-display-size: var(--sape-font-size-48);
  --sape-font-role-display-weight: var(--sape-font-weight-semibold);
  --sape-font-role-display-line-height: var(--sape-font-line-height-tight);
  --sape-font-role-headline-family: var(--sape-font-family-primary);
  --sape-font-role-headline-size: var(--sape-font-size-32);
  --sape-font-role-headline-weight: var(--sape-font-weight-semibold);
  --sape-font-role-headline-line-height: var(--sape-font-line-height-snug);
  --sape-font-role-title-family: var(--sape-font-family-primary);
  --sape-font-role-title-size: var(--sape-font-size-24);
  --sape-font-role-title-weight: var(--sape-font-weight-semibold);
  --sape-font-role-title-line-height: var(--sape-font-line-height-snug);
  --sape-font-role-body-family: var(--sape-font-family-primary);
  --sape-font-role-body-size: var(--sape-font-size-16);
  --sape-font-role-body-weight: var(--sape-font-weight-regular);
  --sape-font-role-body-line-height: var(--sape-font-line-height-normal);
  --sape-font-role-label-family: var(--sape-font-family-primary);
  --sape-font-role-label-size: var(--sape-font-size-14);
  --sape-font-role-label-weight: var(--sape-font-weight-medium);
  --sape-font-role-label-letter-spacing: var(--sape-font-letter-spacing-label);
  --sape-font-role-caption-family: var(--sape-font-family-primary);
  --sape-font-role-caption-size: var(--sape-font-size-12);
  --sape-font-role-caption-weight: var(--sape-font-weight-regular);
  --sape-font-role-footnote-size: var(--sape-font-size-10);
  --sape-font-role-code-family: var(--sape-font-family-mono);
  --sape-font-role-code-size: var(--sape-font-size-14);
  --sape-font-role-numeric-family: var(--sape-font-family-mono);
  --sape-font-role-numeric-size: var(--sape-font-size-14);
  --sape-font-role-numeric-weight: var(--sape-font-weight-medium);
  --sape-font-role-table-family: var(--sape-font-family-primary);
  --sape-font-role-table-size: var(--sape-font-size-12);
  --sape-font-role-table-weight: var(--sape-font-weight-regular);

  /* color — neutral scale (theme-agnostic) */
  --sape-color-neutral-0: #FFFFFF;
  --sape-color-neutral-50: #F8FAFC;
  --sape-color-neutral-100: #F2F4F6;
  --sape-color-neutral-200: #D7DBE0;
  --sape-color-neutral-300: #CFD3D8;
  --sape-color-neutral-400: #A7ACB3;
  --sape-color-neutral-500: #767B83;
  --sape-color-neutral-600: #5C636B;
  --sape-color-neutral-700: #33383E;
  --sape-color-neutral-800: #212832;
  --sape-color-neutral-900: #0D0F13;
  --sape-color-neutral-950: #050608;

  /* color — primary (brand blue) scale */
  --sape-color-primary-50: #EEF3FF;
  --sape-color-primary-100: #DCE6FF;
  --sape-color-primary-200: #B9CBFF;
  --sape-color-primary-300: #8FA8FF;
  --sape-color-primary-400: #5F80FF;
  --sape-color-primary-500: #3F6DFF;
  --sape-color-primary-600: #1C3FF0;
  --sape-color-primary-700: #122AD2;
  --sape-color-primary-800: #1026A6;
  --sape-color-primary-900: #0B1B78;
  --sape-color-primary-950: #071044;

  /* color — secondary (graphite) scale */
  --sape-color-secondary-50: #F2F5F8;
  --sape-color-secondary-100: #DDE4EA;
  --sape-color-secondary-200: #C5CFD9;
  --sape-color-secondary-300: #AEB3B8;
  --sape-color-secondary-400: #8B9095;
  --sape-color-secondary-500: #6B7075;
  --sape-color-secondary-600: #4C5157;
  --sape-color-secondary-700: #333C48;
  --sape-color-secondary-800: #212832;
  --sape-color-secondary-900: #15181D;
  --sape-color-secondary-950: #070809;

  /* color — brand aliases */
  --sape-color-brand-primary: #1C3FF0;
  --sape-color-brand-primary-strong: #122AD2;
  --sape-color-brand-primary-soft: #8FA8FF;
  --sape-color-brand-secondary: #212832;
  --sape-color-brand-accent: #2E86FF;

  /* color — semantic solids + icons (theme-agnostic anchors) */
  --sape-color-semantic-info-solid: #0F5FD6;
  --sape-color-semantic-info-icon: #1573F4;
  --sape-color-semantic-info-hover: #0D53B8;
  --sape-color-semantic-info-active: #093D87;
  --sape-color-semantic-success-solid: #178A5A;
  --sape-color-semantic-success-icon: #147A50;
  --sape-color-semantic-success-hover: #117047;
  --sape-color-semantic-success-active: #0B5737;
  --sape-color-semantic-warning-solid: #B86B00;
  --sape-color-semantic-warning-icon: #9A5A00;
  --sape-color-semantic-warning-hover: #985700;
  --sape-color-semantic-warning-active: #744200;
  --sape-color-semantic-error-solid: #C9333A;
  --sape-color-semantic-error-icon: #AD2A31;
  --sape-color-semantic-error-hover: #A4272D;
  --sape-color-semantic-error-active: #7F1D22;
  --sape-color-semantic-neutral-solid: #333C48;
  --sape-color-semantic-neutral-icon: #5C636B;
  --sape-color-semantic-neutral-hover: #2A323D;
  --sape-color-semantic-neutral-active: #15181D;

  /* color — data visualisation (theme-agnostic categorical set) */
  --sape-color-data-categorical-1: #1C3FF0;
  --sape-color-data-categorical-2: #178A5A;
  --sape-color-data-categorical-3: #B86B00;
  --sape-color-data-categorical-4: #7A4EE8;
  --sape-color-data-categorical-5: #0F8B8D;
  --sape-color-data-categorical-6: #C9333A;
  --sape-color-data-categorical-7: #6270A6;
  --sape-color-data-categorical-8: #6B7075;
  --sape-color-data-diverging-positive: #178A5A;
  --sape-color-data-diverging-positive-soft: #8FD8B7;
  --sape-color-data-diverging-neutral: #D7DBE0;
  --sape-color-data-diverging-negative: #C9333A;
  --sape-color-data-diverging-negative-soft: #F0A6AA;
  --sape-color-data-sequential-1: #EEF3FF;
  --sape-color-data-sequential-2: #B9CBFF;
  --sape-color-data-sequential-3: #5F80FF;
  --sape-color-data-sequential-4: #1C3FF0;
  --sape-color-data-sequential-5: #071044;

  /* grid */
  --sape-grid-breakpoint-mobile: 360px;
  --sape-grid-breakpoint-tablet: 768px;
  --sape-grid-breakpoint-desktop: 1024px;
  --sape-grid-breakpoint-wide: 1440px;
  --sape-grid-web-gutter: 24px;

  /* motion */
  --sape-motion-duration-instant: 0ms; /* @kind other */
  --sape-motion-duration-fast: 120ms; /* @kind other */
  --sape-motion-duration-base: 180ms; /* @kind other */
  --sape-motion-duration-slow: 260ms; /* @kind other */
  --sape-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1); /* @kind other */
  --sape-motion-easing-emphasized: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --sape-motion-opacity-disabled: 0.42; /* @kind other */
  --sape-motion-opacity-muted: 0.68; /* @kind other */
  --sape-motion-opacity-overlay: 0.72; /* @kind other */
  --sape-motion-z-index-base: 0; /* @kind other */
  --sape-motion-z-index-sticky: 100; /* @kind other */
  --sape-motion-z-index-menu: 300; /* @kind other */
  --sape-motion-z-index-popover: 500; /* @kind other */
  --sape-motion-z-index-modal: 800; /* @kind other */
  --sape-motion-z-index-toast: 900; /* @kind other */
}

/* ---- Light theme (default) ---------------------------------------------- */
:root,
:root[data-theme="light"],
.sape-theme-light {
  /* backgrounds + surfaces */
  --sape-color-background-base: #F4F6FA;
  --sape-color-background-subtle: #EDF0F5;
  --sape-color-background-inverse: #050608;
  --sape-color-surface-base: #FFFFFF;
  --sape-color-surface-raised: #FFFFFF;
  --sape-color-surface-sunken: #F2F4F6;
  --sape-color-surface-selected: #EEF3FF;
  --sape-color-surface-hover: #F5F7FB;

  /* text */
  --sape-color-text-primary: #212832;
  --sape-color-text-secondary: #5C636B;
  --sape-color-text-muted: #767B83;
  --sape-color-text-brand: #122AD2;
  --sape-color-text-inverse: #FFFFFF;

  /* borders */
  --sape-color-border-subtle: #E1E5EA;
  --sape-color-border-base: #C7CCD3;
  --sape-color-border-control: #A7ACB3;
  --sape-color-border-strong: #333C48;
  --sape-color-border-disabled: #CFD3D8;
  --sape-color-border-focus: #3F6DFF;
  --sape-color-border-selected: #1C3FF0;
  --sape-color-border-error: #AD2A31;
  --sape-color-border-warning: #9A5A00;
  --sape-color-border-success: #147A50;

  /* action (primary button) */
  --sape-color-action-primary-background: #1C3FF0;
  --sape-color-action-primary-hover: #122AD2;
  --sape-color-action-primary-active: #1026A6;
  --sape-color-action-primary-disabled: #CFD3D8;
  --sape-color-action-primary-text: #FFFFFF;

  /* overlays */
  --sape-color-overlay-scrim: rgba(5, 6, 8, 0.55);
  --sape-color-overlay-veil: rgba(255, 255, 255, 0.72);

  /* semantic subtle + text (light) */
  --sape-color-semantic-info-subtle: #EAF2FF;
  --sape-color-semantic-info-border: #9BC2FF;
  --sape-color-semantic-info-text: #0B438F;
  --sape-color-semantic-success-subtle: #EAF8F1;
  --sape-color-semantic-success-border: #8FD8B7;
  --sape-color-semantic-success-text: #0F5C3C;
  --sape-color-semantic-warning-subtle: #FFF4D8;
  --sape-color-semantic-warning-border: #F0C36A;
  --sape-color-semantic-warning-text: #6F4200;
  --sape-color-semantic-error-subtle: #FDEBEC;
  --sape-color-semantic-error-border: #F0A6AA;
  --sape-color-semantic-error-text: #842126;
  --sape-color-semantic-neutral-subtle: #F2F4F6;
  --sape-color-semantic-neutral-border: #D7DBE0;
  --sape-color-semantic-neutral-text: #212832;

  /* focus ring */
  --sape-color-focus-ring: rgba(63, 109, 255, 0.38);

  /* elevation — RESOLVED + refined (layered ambient + key) */
  --sape-shadow-none: none;
  --sape-shadow-level-1: 0 1px 2px rgba(5, 6, 8, 0.08), 0 1px 1px rgba(5, 6, 8, 0.04);
  --sape-shadow-level-2: 0 2px 4px rgba(5, 6, 8, 0.07), 0 4px 10px rgba(5, 6, 8, 0.07);
  --sape-shadow-level-3: 0 4px 8px rgba(5, 6, 8, 0.08), 0 10px 24px rgba(5, 6, 8, 0.10);
  --sape-shadow-level-4: 0 8px 16px rgba(5, 6, 8, 0.10), 0 18px 40px rgba(5, 6, 8, 0.14);
  --sape-shadow-level-5: 0 12px 24px rgba(5, 6, 8, 0.12), 0 28px 60px rgba(5, 6, 8, 0.20);

  --sape-elevation-level-0-surface: var(--sape-color-neutral-50);
  --sape-elevation-level-0-border: var(--sape-color-border-subtle);
  --sape-elevation-level-0-shadow: var(--sape-shadow-none);
  --sape-elevation-level-1-surface: var(--sape-color-surface-base);
  --sape-elevation-level-1-border: var(--sape-color-border-subtle);
  --sape-elevation-level-1-shadow: var(--sape-shadow-level-1);
  --sape-elevation-level-2-surface: var(--sape-color-surface-base);
  --sape-elevation-level-2-border: var(--sape-color-border-base);
  --sape-elevation-level-2-shadow: var(--sape-shadow-level-2);
  --sape-elevation-level-3-surface: var(--sape-color-surface-base);
  --sape-elevation-level-3-border: var(--sape-color-primary-200);
  --sape-elevation-level-3-shadow: var(--sape-shadow-level-3);
  --sape-elevation-level-4-surface: var(--sape-color-surface-base);
  --sape-elevation-level-4-border: var(--sape-color-primary-300);
  --sape-elevation-level-4-shadow: var(--sape-shadow-level-4);
  --sape-elevation-level-5-surface: var(--sape-color-surface-base);
  --sape-elevation-level-5-border: var(--sape-color-primary-500);
  --sape-elevation-level-5-shadow: var(--sape-shadow-level-5);
}

/* ---- Dark theme --------------------------------------------------------- */
:root[data-theme="dark"],
.sape-theme-dark {
  color-scheme: dark;

  /* backgrounds + surfaces (layered charcoal, not pure black chrome) */
  --sape-color-background-base: #0A0C10;
  --sape-color-background-subtle: #05070A;
  --sape-color-background-inverse: #FFFFFF;
  --sape-color-surface-base: #15181D;
  --sape-color-surface-raised: #1C2027;
  --sape-color-surface-sunken: #0D0F13;
  --sape-color-surface-selected: #12224A;
  --sape-color-surface-hover: #1E232B;

  /* text */
  --sape-color-text-primary: #F2F4F6;
  --sape-color-text-secondary: #CFD3D8;
  --sape-color-text-muted: #A7ACB3;
  --sape-color-text-brand: #8FA8FF;
  --sape-color-text-inverse: #050608;

  /* borders */
  --sape-color-border-subtle: #2A2F37;
  --sape-color-border-base: #3B4148;
  --sape-color-border-control: #565C64;
  --sape-color-border-strong: #CFD3D8;
  --sape-color-border-disabled: #3B4148;
  --sape-color-border-focus: #8FA8FF;
  --sape-color-border-selected: #8FA8FF;
  --sape-color-border-error: #F0A6AA;
  --sape-color-border-warning: #F0C36A;
  --sape-color-border-success: #8FD8B7;

  /* action (primary button) */
  --sape-color-action-primary-background: #3F6DFF;
  --sape-color-action-primary-hover: #5F80FF;
  --sape-color-action-primary-active: #8FA8FF;
  --sape-color-action-primary-disabled: #3B4148;
  --sape-color-action-primary-text: #050608;

  /* overlays */
  --sape-color-overlay-scrim: rgba(2, 3, 5, 0.66);
  --sape-color-overlay-veil: rgba(10, 12, 16, 0.72);

  /* semantic subtle + text — CORRECTED for dark surfaces */
  --sape-color-semantic-info-subtle: #0E2338;
  --sape-color-semantic-info-border: #1D4E8A;
  --sape-color-semantic-info-text: #9BC2FF;
  --sape-color-semantic-info-icon: #5FA0FF;
  --sape-color-semantic-success-subtle: #0C241A;
  --sape-color-semantic-success-border: #1C5C40;
  --sape-color-semantic-success-text: #8FD8B7;
  --sape-color-semantic-success-icon: #4FBB8A;
  --sape-color-semantic-warning-subtle: #2A1E08;
  --sape-color-semantic-warning-border: #6B4A12;
  --sape-color-semantic-warning-text: #F0C36A;
  --sape-color-semantic-warning-icon: #E0A63A;
  --sape-color-semantic-error-subtle: #2E1416;
  --sape-color-semantic-error-border: #7A2A2E;
  --sape-color-semantic-error-text: #F0A6AA;
  --sape-color-semantic-error-icon: #E4646B;
  --sape-color-semantic-neutral-subtle: #1C2027;
  --sape-color-semantic-neutral-border: #2A2F37;
  --sape-color-semantic-neutral-text: #CFD3D8;

  /* data viz — brighten anchors that were too dark on charcoal */
  --sape-color-data-categorical-1: #5F80FF;
  --sape-color-data-categorical-2: #34B47C;
  --sape-color-data-categorical-3: #E0A63A;
  --sape-color-data-categorical-4: #A484F2;
  --sape-color-data-categorical-5: #38B7B9;
  --sape-color-data-categorical-6: #E4646B;
  --sape-color-data-categorical-7: #8E9AC8;
  --sape-color-data-categorical-8: #9BA1A8;

  /* focus ring */
  --sape-color-focus-ring: rgba(143, 168, 255, 0.45);

  /* elevation — darker, stronger shadows for charcoal depth */
  --sape-shadow-none: none;
  --sape-shadow-level-1: 0 1px 2px rgba(0, 0, 0, 0.45), 0 1px 1px rgba(0, 0, 0, 0.30);
  --sape-shadow-level-2: 0 2px 6px rgba(0, 0, 0, 0.50), 0 6px 14px rgba(0, 0, 0, 0.40);
  --sape-shadow-level-3: 0 6px 14px rgba(0, 0, 0, 0.55), 0 12px 28px rgba(0, 0, 0, 0.45);
  --sape-shadow-level-4: 0 10px 22px rgba(0, 0, 0, 0.60), 0 22px 46px rgba(0, 0, 0, 0.50);
  --sape-shadow-level-5: 0 16px 32px rgba(0, 0, 0, 0.65), 0 34px 70px rgba(0, 0, 0, 0.55);

  --sape-elevation-level-0-surface: var(--sape-color-background-subtle);
  --sape-elevation-level-0-border: var(--sape-color-border-subtle);
  --sape-elevation-level-0-shadow: var(--sape-shadow-none);
  --sape-elevation-level-1-surface: var(--sape-color-surface-base);
  --sape-elevation-level-1-border: var(--sape-color-border-subtle);
  --sape-elevation-level-1-shadow: var(--sape-shadow-level-1);
  --sape-elevation-level-2-surface: var(--sape-color-surface-raised);
  --sape-elevation-level-2-border: var(--sape-color-border-base);
  --sape-elevation-level-2-shadow: var(--sape-shadow-level-2);
  --sape-elevation-level-3-surface: var(--sape-color-surface-raised);
  --sape-elevation-level-3-border: var(--sape-color-primary-700);
  --sape-elevation-level-3-shadow: var(--sape-shadow-level-3);
  --sape-elevation-level-4-surface: var(--sape-color-surface-raised);
  --sape-elevation-level-4-border: var(--sape-color-primary-600);
  --sape-elevation-level-4-shadow: var(--sape-shadow-level-4);
  --sape-elevation-level-5-surface: var(--sape-color-surface-raised);
  --sape-elevation-level-5-border: var(--sape-color-primary-500);
  --sape-elevation-level-5-shadow: var(--sape-shadow-level-5);
}

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