/* ============================================================
   Swatch Four — Color tokens
   Base palette is monochrome + warm cream paper.
   Color enters through per-project four-swatch accents,
   never through a loud brand color.
   ============================================================ */

:root {
  /* --- Brand base (from brand guidelines) --- */
  --sf-black: #10100E;   /* Swatch Four Black — primary ink & dark surfaces */
  --sf-paper: #FFFFE3;   /* Cream paper — the signature light background   */
  --sf-white: #FFFFFF;   /* Pure white — cards on dark, monitor UI         */
  --sf-gray:  #7D7D6F;   /* Warm neutral gray — secondary text, hairlines  */
  --sf-orange:#CC5810;   /* Secondary accent — quiet, used sparingly       */

  /* --- Warm neutral ramp (harmonic around --sf-black / --sf-gray) --- */
  --sf-ink-950: #0B0B09;
  --sf-ink-900: #10100E;
  --sf-ink-800: #1E1E1A;
  --sf-ink-700: #2C2C26;
  --sf-ink-600: #4A4A40;
  --sf-ink-500: #7D7D6F;
  --sf-ink-400: #9B9B8E;
  --sf-ink-300: #BCBCB0;
  --sf-ink-200: #D8D8CC;
  --sf-ink-150: #E7E7DB;
  --sf-ink-100: #F2F2E7;
  --sf-cream:   #FFFFE3;

  /* --- Accent + tints --- */
  --sf-orange-strong: #B44B0C;
  --sf-orange:        #CC5810;
  --sf-orange-tint:   #F0D9C7;

  /* Signature Notion-style highlight (used for contact / accent text) */
  --sf-highlight: #F4E7A6;   /* soft yellow wash, warm */
  --sf-yellow:    #EDE1A1;   /* butter yellow — dark-mode headline & CTA accent */

  /* ============================================================
     Semantic aliases — reference these in components
     ============================================================ */

  /* Surfaces */
  --surface-page:      var(--sf-cream);
  --surface-page-dark: var(--sf-black);
  --surface-card:      var(--sf-white);
  --surface-raised:    #FBFBF0;
  --surface-inset:     #F4F4E6;
  --surface-invert:    var(--sf-black);

  /* Text */
  --text-primary:   var(--sf-black);
  --text-secondary: var(--sf-ink-600);
  --text-muted:     var(--sf-gray);
  --text-heading:   var(--sf-black);   /* headline ink (light = black, dark = butter yellow) */
  --text-invert:    var(--sf-cream);
  --text-invert-muted: #A9A99C;
  --text-accent:    var(--sf-orange);
  --text-on-accent: var(--sf-cream);

  /* Lines & borders */
  --border-hair:   #E2E2D3;   /* thin dividers on paper */
  --border-soft:   #D2D2C4;
  --border-strong: var(--sf-black);
  --border-invert: #33332C;   /* hairlines on dark */

  /* Interactive */
  --accent:         var(--sf-black);
  --accent-hover:   var(--sf-ink-800);
  --accent-press:   var(--sf-ink-950);
  --accent-2:       var(--sf-orange);
  --accent-2-hover: var(--sf-orange-strong);

  /* Focus ring */
  --focus-ring: color-mix(in oklab, var(--sf-orange) 55%, transparent);

  /* Status (kept muted — brand avoids loud color) */
  --status-ok:    #4C6B3F;
  --status-warn:  #B07A17;
  --status-error: #A23B2A;
}