/* ==========================================================================
   Sprig Design System — Design Tokens
   Source of truth: "Sprig Design Tokens.dc.html" (Claude Design project).
   Every value the system is built from. Reference by variable, never re-invent.
   ========================================================================== */

:root {
  /* ---- Color · brand ---------------------------------------------------- */
  --color-brand-primary:       #F6C515;
  --color-brand-primary-hover: #E3B30C;
  --color-brand-primary-tint:  #FCEFB8;

  /* ---- Color · ink (text & structure) ----------------------------------- */
  --color-ink-900: #15273B;
  --color-ink-700: #2E3D4F;
  --color-ink-500: #5A6573;
  --color-ink-300: #95A0AD;

  /* ---- Color · accents (STATUS ONLY — each with its tint) --------------- */
  --color-accent-green:       #2FA875;
  --color-accent-green-tint:  #D9F0E4;
  --color-accent-teal:        #2FA6B4;
  --color-accent-teal-tint:   #D6EEF1;
  --color-accent-purple:      #7B61E0;
  --color-accent-purple-tint: #E7E1FA;
  --color-accent-orange:      #EE7B3C;
  --color-accent-orange-tint: #FBE4D3;
  --color-accent-red:         #E0524B;
  --color-accent-red-tint:    #FADAD8;

  /* ---- Backgrounds ------------------------------------------------------ */
  --background-default: #F2EEE7;  /* page canvas  */
  --background-surface: #FFFFFF;  /* cards/panels */
  --background-subtle:  #F7F4EF;
  --background-muted:   #F0ECE3;
  --background-accent:  #F6C515;
  --background-inverse: #15273B;

  /* ---- Borders ---------------------------------------------------------- */
  --border-default: #E4DED2;
  --border-subtle:  #F0ECE3;
  --border-strong:  #15273B;
  --border-focus:   #F6C515;
  --border-width:   2px;

  /* ---- Spacing (4-based scale ONLY) ------------------------------------ */
  --spacing-xsmall:  4px;
  --spacing-small:   8px;
  --spacing-compact: 12px;
  --spacing-medium:  16px;
  --spacing-large:   24px;
  --spacing-xlarge:  32px;
  --spacing-xxlarge: 48px;
  --spacing-section: 64px;

  /* ---- Radius ----------------------------------------------------------- */
  --radius-small:  8px;
  --radius-medium: 12px;
  --radius-button: 11px;
  --radius-input:  11px;
  --radius-card:   20px;
  --radius-badge:  999px;

  /* ---- Shadows (only these) -------------------------------------------- */
  --shadow-small:  0 1px 2px rgba(20, 30, 50, .07);
  --shadow-card:   0 10px 30px rgba(20, 30, 50, .06);
  --shadow-medium: 0 6px 16px rgba(20, 30, 50, .08);
  --shadow-large:  0 12px 32px rgba(20, 30, 50, .10);
  --shadow-xlarge: 0 22px 50px rgba(20, 30, 50, .14);

  /* ---- Typography · families ------------------------------------------- */
  --font-ui:    'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-serif: 'Source Serif 4', Georgia, serif;        /* quotes only */
  --font-mono:  'JetBrains Mono', ui-monospace, monospace; /* code/data  */

  /* ---- Typography · scale (size · weight · tracking) -------------------- */
  /* display 72/800/-3% (1 per screen) · heading 30/800 · title 20/700      */
  /* body 16/500 (>=13px floor) · caption 13/600 · serif 22/500 (quotes)     */
  --type-display-size:    72px;  --type-display-weight: 800; --type-display-tracking: -0.03em;
  --type-heading-size:    30px;  --type-heading-weight: 800; --type-heading-tracking: -0.02em;
  --type-title-size:      20px;  --type-title-weight:   700; --type-title-tracking:   -0.01em;
  --type-body-size:       16px;  --type-body-weight:    500;
  --type-caption-size:    13px;  --type-caption-weight: 600;
  --type-serif-size:      22px;  --type-serif-weight:   500;

  /* ---- Component tokens · button --------------------------------------- */
  --button-primary-bg:     var(--color-brand-primary);
  --button-primary-text:   var(--color-ink-900);     /* navy on yellow — never white */
  --button-primary-hover:  var(--color-brand-primary-hover);
  --button-secondary-bg:   var(--background-surface);
  --button-secondary-text: var(--color-ink-900);
  --button-secondary-border: var(--border-strong);
  --button-disabled-bg:    var(--background-muted);
  --button-disabled-text:  #B7BFC8;
  --button-radius:         var(--radius-button);
  --button-padding:        13px 26px;
  --button-font-weight:    700;
  --button-font-size:      15px;

  /* ---- Component tokens · card ----------------------------------------- */
  --card-bg:           var(--background-surface);
  --card-border:       var(--border-default);
  --card-border-width: 1px;
  --card-radius:       var(--radius-card);
  --card-padding:      26px;
  --card-gap:          var(--spacing-medium);
  --card-shadow:       var(--shadow-card);

  /* ---- Component tokens · input ---------------------------------------- */
  --input-bg:           var(--background-subtle);
  --input-text:         var(--color-ink-900);
  --input-placeholder:  var(--color-ink-300);
  --input-border:       var(--border-default);
  --input-border-focus: var(--border-focus);
  --input-border-width: var(--border-width);
  --input-radius:       var(--radius-input);
  --input-padding:      13px 15px;
  --input-font-size:    15px;
}