/* ==========================================================================
   Salomão Design System — tokens
   Mirrors _ds/salom-o-design-system/tokens/*.css from the Claude Design
   project. Keep this file in sync with the design system, and build page CSS
   only on top of these variables.
   ========================================================================== */

:root {
  /* --- Brand ramp (Style Sheet — Color Palette, Aug 2026) --- */
  --navy-900: #000E1B;
  --blue-700: #0263BE;
  --blue-500: #1A88EE;
  --blue-300: #6BB7FE;
  --blue-100: #C8E4FF;
  --green-400: #9DFF00;
  --white: #FFFFFF;

  /* --- Mixed neutrals: navy tinted, never grey --- */
  --navy-800: #04182B;
  --navy-700: #08233C;
  --navy-600: #0D2E4C;
  --navy-500: #14405F;

  /* --- Semantic surfaces --- */
  --surface-page: var(--navy-900);
  --surface-raised: var(--navy-800);
  --surface-card: var(--navy-700);
  --surface-inset: var(--navy-600);
  --surface-brand: var(--blue-500);
  --surface-brand-deep: var(--blue-700);
  --surface-light: var(--white);
  --surface-light-tint: var(--blue-100);

  /* --- Semantic text --- */
  --text-primary: var(--white);
  --text-secondary: var(--blue-100);
  --text-muted: var(--blue-300);
  --text-on-light: var(--navy-900);
  --text-on-light-secondary: var(--blue-700);
  --text-accent: var(--blue-500);
  --text-highlight: var(--green-400);

  /* --- Lines & strokes --- */
  --border-subtle: rgba(200, 228, 255, .14);
  --border-strong: rgba(200, 228, 255, .32);
  --border-brand: var(--blue-500);
  --border-on-light: rgba(0, 14, 27, .12);

  /* Hairline used for the section rules on the portfolio page. */
  --border-hairline: rgba(200, 228, 255, .10);
  --surface-field: rgba(200, 228, 255, .05);
  --border-field: rgba(200, 228, 255, .16);

  /* --- Interaction --- */
  --action-primary: var(--blue-500);
  --action-primary-hover: #3699F5;
  --action-primary-press: var(--blue-700);
  --action-accent: var(--green-400);
  --focus-ring: var(--green-400);

  /* --- Status --- */
  --status-info: var(--blue-500);
  --status-success: var(--green-400);
  --status-warning: #FFC24A;
  --status-danger: #FF5A5A;

  /* --- Typography --- */
  --font-display: "Climate Crisis", system-ui, sans-serif;
  --font-body: "Elms Sans", system-ui, -apple-system, sans-serif;

  --text-caption: 9px;
  --text-caption-lg: 22px;
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-md: 18px;
  --text-lg: 20px;
  --text-display-md: 25px;
  --text-display-lg: 44px;
  --text-display-xl: 68px;
  --text-display-2xl: 104px;

  --leading-tight: .92;
  --leading-snug: 1.15;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  --tracking-display: .01em;
  --tracking-caption: .16em;
  --tracking-normal: 0;
  --tracking-tight: -.011em;

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

  /* --- Spacing --- */
  --space-0: 0px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  --gutter-inline: 40px;
  --gutter-section: 96px;
  --content-max: 1200px;
  --prose-max: 64ch;

  /* --- Effects --- */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 36px;
  --radius-pill: 999px;
  --radius-media: 8px;

  --shadow-sm: 0 1px 2px rgba(0, 14, 27, .28);
  --shadow-md: 0 6px 18px -6px rgba(0, 14, 27, .55);
  --shadow-lg: 0 24px 48px -18px rgba(0, 14, 27, .7);
  --shadow-brand: 0 12px 32px -10px rgba(26, 136, 238, .55);
  --shadow-inset: inset 0 1px 0 rgba(200, 228, 255, .08);
  --glow-blue: 0 0 80px rgba(26, 136, 238, .35);
  --blur-panel: blur(18px);

  /* --- Motion --- */
  --ease-out: cubic-bezier(.2, .8, .25, 1);
  --ease-in-out: cubic-bezier(.6, 0, .35, 1);
  --ease-spring: cubic-bezier(.34, 1.4, .44, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 420ms;
  --press-scale: .97;
}