/* loyali — design tokens v1.0
   Fonts: Onest (display + text), JetBrains Mono (labels, numbers in UI)
   <link href="https://fonts.googleapis.com/css2?family=Onest:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet"> */

:root {
  /* Core palette */
  --ly-ink:     #17171A; /* text, mark, dark surfaces */
  --ly-paper:   #F4EFE6; /* base background */
  --ly-point:   #FF5B37; /* the bonus point: accent, used sparingly */
  --ly-moss:    #2F4A3A; /* secondary: calm surfaces, success */
  --ly-sand:    #E4D8C4; /* cards, dividers on paper */
  --ly-stone:   #8C857A; /* muted text, captions */
  --ly-white:   #FFFFFF;

  /* Tints */
  --ly-point-soft: #FFE3DA;
  --ly-moss-soft:  #DCE5DE;

  /* Semantic */
  --ly-bg:        var(--ly-paper);
  --ly-surface:   var(--ly-white);
  --ly-text:      var(--ly-ink);
  --ly-muted:     var(--ly-stone);
  --ly-accent:    var(--ly-point);
  --ly-positive:  var(--ly-moss);
  --ly-border:    rgba(23, 23, 26, 0.10);

  /* Type */
  --ly-font:      "Onest", "Inter", system-ui, sans-serif;
  --ly-mono:      "JetBrains Mono", ui-monospace, monospace;
  --ly-display:   600 clamp(40px, 6vw, 88px)/0.95 var(--ly-font);
  --ly-tracking-display: -0.035em;

  /* Shape */
  --ly-radius-sm: 8px;
  --ly-radius:    14px;
  --ly-radius-lg: 24px;
  --ly-radius-pill: 999px;
  --ly-stroke:    0.14; /* mark stroke = 14% of its height */

  --ly-shadow:    0 1px 2px rgba(23,23,26,.06), 0 8px 24px rgba(23,23,26,.08);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ly-bg:      #121214;
    --ly-surface: #1C1C20;
    --ly-text:    #F4EFE6;
    --ly-muted:   #9A948A;
    --ly-border:  rgba(244, 239, 230, 0.12);
  }
}
:root[data-theme="dark"] {
  --ly-bg:      #121214;
  --ly-surface: #1C1C20;
  --ly-text:    #F4EFE6;
  --ly-muted:   #9A948A;
  --ly-border:  rgba(244, 239, 230, 0.12);
}