/* ==========================================================================
   tokens.css
   Obelyr industrial-signage register.
   Tinted off-white paper, warm near-black ink, single oxide-red signal accent.
   ========================================================================== */

@font-face {
  font-family: 'Departure Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/DepartureMono-Regular.woff2') format('woff2');
}

:root{
  /* -------- Paper (surfaces) -------- */
  --paper:        oklch(0.972 0.012 70);    /* warm off-white */
  --paper-2:      oklch(0.948 0.014 70);    /* slightly deeper bands */
  --paper-3:      oklch(0.922 0.016 70);    /* depressed wells / code */
  --paper-edge:   oklch(0.985 0.008 70);    /* topbar lift */

  /* -------- Ink (text) -------- */
  --ink:          oklch(0.18 0.012 70);     /* body */
  --ink-dim:      oklch(0.42 0.010 70);     /* secondary */
  --ink-faint:    oklch(0.62 0.008 70);     /* meta / captions */
  --ink-deep:     oklch(0.12 0.014 70);     /* display headlines */

  /* -------- Hairlines / structure -------- */
  --rule:         oklch(0.85 0.014 70);     /* hairline (1px) */
  --rule-strong:  oklch(0.72 0.014 70);     /* heavy hairline */
  --rule-faint:   oklch(0.91 0.012 70);     /* whisper */

  /* -------- Accent: oxide red, signal-system pigment -------- */
  --signal:       oklch(0.52 0.155 28);     /* oxide red */
  --signal-deep:  oklch(0.42 0.150 28);
  --signal-bright:oklch(0.62 0.165 30);
  --signal-soft:  oklch(0.96 0.030 28);

  /* -------- Status (used sparingly inside product surfaces only) -------- */
  --warn:         oklch(0.65 0.140 60);
  --warn-soft:    oklch(0.96 0.045 75);
  --good:         oklch(0.55 0.090 150);
  --good-soft:    oklch(0.96 0.030 150);

  /* -------- Legacy aliases (kept so we don't break inner pages) -------- */
  --bg:           var(--paper);
  --bg-soft:      var(--paper-2);
  --surface:      var(--paper);
  --surface-2:    var(--paper-2);
  --surface-3:    var(--paper-3);
  --fg:           var(--ink);
  --fg-bright:    var(--ink-deep);
  --fg-dim:       var(--ink-dim);
  --fg-faint:     var(--ink-faint);
  --fg-deep:      var(--ink-deep);
  --num:          var(--ink-deep);
  --line:         var(--rule);
  --line-strong:  var(--rule-strong);
  --line-bright:  var(--rule-strong);
  --border:       var(--rule);
  --border-soft:  var(--rule-faint);
  --border-strong:var(--rule-strong);
  --border-cool:  var(--signal);
  --accent:       var(--signal);
  --accent-deep:  var(--signal-deep);
  --accent-bright:var(--signal-bright);
  --accent-hover: var(--signal-deep);
  --accent-soft:  var(--signal-soft);
  --accent-edge:  oklch(0.52 0.155 28 / 0.36);
  --accent-ink:   #FFFFFF;
  --accent-grad:  linear-gradient(180deg, var(--signal-bright) 0%, var(--signal) 50%, var(--signal-deep) 100%);
  --cool-soft:    var(--paper-2);
  --trust:        var(--good);
  --trust-soft:   var(--good-soft);
  --warm:         var(--warn);
  --warm-soft:    var(--warn-soft);
  --danger:       var(--signal-deep);
  --danger-soft:  var(--signal-soft);
  --bg-code:      var(--paper-3);
  --bg-code-tab:  var(--paper-2);
  --code-fg:      var(--ink);
  --topbar:       var(--paper);
  --topbar-edge:  var(--rule);

  /* iOS safe-area insets (need viewport-fit=cover on the meta tag). */
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-right:  env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left, 0px);
  --ink-bg:       var(--ink-deep);
  --ink-bg-fg:    var(--paper);
  --ink-bg-dim:   oklch(0.72 0.010 70);
  --ink-bg-line:  oklch(0.30 0.010 70);

  /* -------- Shadows: barely there, paper-on-paper -------- */
  --shadow-sm:   0 1px 0 oklch(0.78 0.014 70);
  --shadow-md:   0 1px 0 oklch(0.78 0.014 70), 0 12px 28px -16px oklch(0.40 0.014 70 / 0.18);
  --shadow-lg:   0 1px 0 oklch(0.78 0.014 70), 0 22px 60px -28px oklch(0.30 0.014 70 / 0.28);
  --shadow-glow: 0 0 0 1px var(--signal);
  --shadow-btn:  0 1px 0 oklch(0.30 0.014 70 / 0.20);
  --shadow-mast: 0 28px 80px -32px oklch(0.30 0.014 70 / 0.22);

  --mast-1: var(--paper);
  --mast-2: var(--paper-2);
  --mast-3: var(--paper);
  --mast-4: var(--paper-2);
  --mast-grad: linear-gradient(180deg, var(--paper), var(--paper-2));

  /* -------- Radii: square-leaning, signage discipline -------- */
  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 2px;

  /* -------- Sizing -------- */
  --max:       1440px;
  --inner:     1320px;
  --gutter:    clamp(20px, 4vw, 56px);
  --rail:      clamp(48px, 7vw, 96px);  /* left rail width for numerals */
  --section-y: clamp(96px, 11vw, 176px);

  /* -------- Type stacks --------
     Display: Bricolage Grotesque (variable; wdth pulled narrow for signage feel)
     Body / UI: Hanken Grotesk
     Mono: JetBrains Mono (rare, product-surface moments only)
     All three loaded via Google Fonts in _base.html. */
  --font-display: 'Bricolage Grotesque', 'Helvetica Neue', 'Helvetica',
                  'Arial Narrow', Arial, sans-serif;
  --font-sans:    'Hanken Grotesk', -apple-system, 'Segoe UI',
                  'Helvetica Neue', Arial, sans-serif;
  --font-serif:   var(--font-display);
  --font-mono:    'Departure Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Variation axes applied wherever the display face is used at headline sizes */
  --display-vars-tight:  'wdth' 78, 'wght' 500;
  --display-vars-normal: 'wdth' 92, 'wght' 500;

  /* -------- Flower mark (PNG mask repainted by color) -------- */
  --flower-ink:           var(--ink-deep);
  --flower-watermark-ink: var(--signal);
  --flower-divider-ink:   var(--ink-faint);

  /* -------- Glass legacy -------- */
  --glass:        oklch(0.972 0.012 70 / 0.62);
  --glass-strong: var(--topbar);
  --glass-edge:   var(--rule);
  --glass-inner:  inset 0 1px 0 oklch(1 0 0 / 0.4);
}