/* ============================================================
   Roulsen — Color tokens
   Primary: black, off-white, charcoal, silver.
   Accent: one deep cobalt blue, used sparingly.
   ============================================================ */

:root {
  /* --- Base ink ramp (near-black -> silver) --- */
  --ink-900: #0B0B0C;   /* brand black — primary text, dark canvases */
  --ink-800: #161618;
  --ink-700: #232327;   /* charcoal */
  --ink-600: #3A3A3F;
  --ink-500: #56565C;
  --ink-400: #7B7B82;   /* mid silver-grey — muted text */
  --ink-300: #A7A7AE;   /* silver */
  --ink-200: #CFCFD4;
  --ink-150: #DEDDD9;
  --ink-100: #E8E7E2;   /* hairline borders on paper */

  /* --- Paper (warm off-white) --- */
  --paper:      #F6F5F1; /* primary background */
  --paper-soft: #EFEEE9; /* recessed panels on paper */
  --paper-pure: #FCFBF8; /* raised cards on paper */
  --white:      #FFFFFF;

  /* --- Accent: deep cobalt --- */
  --cobalt-700: #122399; /* pressed */
  --cobalt-600: #1A31C4; /* hover */
  --cobalt-500: #2138DE; /* base accent */
  --cobalt-100: #E4E7FB; /* faint cobalt wash */

  /* --- Semantic surfaces --- */
  --bg:            var(--paper);
  --bg-inverse:    var(--ink-900);
  --surface:       var(--paper-pure);
  --surface-sunk:  var(--paper-soft);
  --surface-dark:  var(--ink-800);

  /* --- Semantic text --- */
  --text-primary:    var(--ink-900);
  --text-secondary:  var(--ink-500);
  --text-muted:      var(--ink-400);
  --text-on-dark:    var(--paper);
  --text-on-dark-sec:var(--ink-300);
  --text-accent:     var(--cobalt-500);

  /* --- Lines & borders --- */
  --border:        var(--ink-100);
  --border-strong: var(--ink-200);
  --border-dark:   rgba(255,255,255,0.14);
  --hairline:      rgba(11,11,12,0.10);

  /* --- Accent semantics --- */
  --accent:        var(--cobalt-500);
  --accent-hover:  var(--cobalt-600);
  --accent-press:  var(--cobalt-700);
  --accent-wash:   var(--cobalt-100);
  --focus-ring:    var(--cobalt-500);
}