/* SarateStudio Site — Design Tokens
   Mirrors the DS, BUT light is default here (site is editorial-magazine first).
   Toggle to dark still available via [data-theme="dark"]. */

:root {
  /* --- PRIMITIVES --------------------------------------------------------- */
  --neutral-50:  #F7F6F3;
  --neutral-100: #EFEEE9;
  --neutral-200: #E2E0D8;
  --neutral-300: #C9C6BD;
  --neutral-400: #9D9A92;
  --neutral-500: #6F6D67;
  --neutral-600: #4E4D49;
  --neutral-700: #2F2F2D;
  --neutral-800: #1F1F1E;
  --neutral-900: #161615;
  --neutral-950: #0F0F0F;

  --orange-50:  #FEF1ED;
  --orange-100: #FCDCD0;
  --orange-200: #F9B8A0;
  --orange-300: #F49174;
  --orange-400: #EE7148;
  --orange-500: #E8552D;
  --orange-600: #C8421F;
  --orange-700: #A23517;
  --orange-800: #7B2811;
  --orange-900: #531B0B;

  --semantic-red-500:    #DC2626;
  --semantic-green-500:  #16A34A;
  --semantic-yellow-500: #EAB308;
  --semantic-blue-500:   #2563EB;

  --white: #FFFFFF;
  --black: #000000;

  /* --- SEMANTIC TOKENS — LIGHT (default for site) --------------------- */
  --color-bg-canvas:   var(--neutral-50);
  --color-bg-surface:  var(--white);
  --color-bg-elevated: var(--white);
  --color-bg-muted:    var(--neutral-100);
  --color-bg-inverse:  var(--neutral-950);

  --color-text-primary:   var(--neutral-950);
  --color-text-secondary: var(--neutral-700);
  --color-text-muted:     var(--neutral-500);
  --color-text-inverse:   var(--neutral-50);
  --color-text-accent:    var(--orange-600);
  --color-text-on-accent: var(--white);

  --color-border-subtle:  var(--neutral-200);
  --color-border-default: var(--neutral-300);
  --color-border-strong:  var(--neutral-500);
  --color-border-accent:  var(--orange-600);

  --color-accent-default: var(--orange-600);
  --color-accent-hover:   var(--orange-700);
  --color-accent-pressed: var(--orange-800);
  --color-accent-muted:   var(--orange-100);

  --color-feedback-success: var(--semantic-green-500);
  --color-feedback-warning: var(--semantic-yellow-500);
  --color-feedback-danger:  var(--semantic-red-500);
  --color-feedback-info:    var(--semantic-blue-500);

  /* --- SPACING / RADIUS ------------------------------------------------- */
  --spacing-0: 0; --spacing-2xs: 2px; --spacing-xs: 4px; --spacing-sm: 8px;
  --spacing-md: 12px; --spacing-base: 16px; --spacing-lg: 20px; --spacing-xl: 24px;
  --spacing-2xl: 32px; --spacing-3xl: 40px; --spacing-4xl: 48px; --spacing-5xl: 64px;
  --spacing-6xl: 80px; --spacing-7xl: 96px;

  --radius-none: 0; --radius-xs: 2px; --radius-sm: 4px; --radius-md: 8px;
  --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 24px; --radius-full: 9999px;

  /* --- TYPOGRAPHY ------------------------------------------------------- */
  --font-sans: "Helvetica Neue", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --fs-mega:       clamp(64px, 14vw, 200px);   /* hero wordmark */
  --fs-display-xl: clamp(56px, 9vw, 96px);
  --fs-display-l:  clamp(48px, 7vw, 72px);
  --fs-h1: clamp(36px, 5vw, 48px);
  --fs-h2: clamp(28px, 4vw, 36px);
  --fs-h3: clamp(22px, 3vw, 28px);
  --fs-h4: 22px;
  --fs-body-lg: 18px; --fs-body-md: 16px; --fs-body-sm: 14px;
  --fs-label-md: 14px; --fs-label-sm: 12px;
  --fs-caption: 12px; --fs-overline: 11px;

  --fw-regular: 400; --fw-medium: 500; --fw-bold: 700;

  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.10);
  --shadow-md: 0 2px 8px 0 rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 24px 0 rgba(0, 0, 0, 0.12);
  --focus-ring: 0 0 0 3px rgba(200, 66, 31, 0.30);

  /* --- LAYOUT ---------------------------------------------------------- */
  --page-max-width: 1640px;
  --page-padding-x: clamp(32px, 6vw, 120px);
  --section-gap: clamp(80px, 10vw, 160px);
}

/* Light-only — dark mode removed by design decision */