/*
 * lofi-engineering — design tokens
 *
 * The single source of truth for the look of every lofi-engineering site.
 * Other sites (e.g. miniprints.lofi-engineering.dev) can load this file directly:
 *   <link rel="stylesheet" href="https://lofi-engineering.dev/theme/tokens.css">
 *
 * Layers:
 *   1. Palette   — raw colors. Change these to re-skin.
 *   2. Semantic  — what colors are *for*. Components only use these.
 *   3. Type, space, shape, motion.
 *
 * Dark mode re-maps the semantic layer only. It applies when the OS prefers dark
 * (unless the visitor picked light) or when <html data-theme="dark"> is set.
 */

:root {
  /* ---------- 1. Palette ---------- */
  --paper-50:  #fbf8f3;
  --paper-100: #f5f0e8;
  --paper-200: #ebe4d8;
  --paper-300: #d9d0c1;
  --ink-400:   #8a8175;
  --ink-600:   #5c554c;
  --ink-800:   #2f2b26;
  --ink-900:   #1f1c19;

  --clay-400:  #d0896a;
  --clay-500:  #b86f50;
  --moss-400:  #8fa37e;
  --moss-500:  #6f8460;
  --honey-400: #d9b26a;
  --honey-500: #b8913f;

  /* ---------- 2. Semantic colors ---------- */
  --color-bg:            var(--paper-100);
  --color-surface:       var(--paper-50);
  --color-surface-hover: #ffffff;
  --color-border:        var(--paper-300);
  --color-text:          var(--ink-900);
  --color-text-muted:    var(--ink-600);
  --color-text-faint:    var(--ink-400);
  --color-accent:        var(--clay-500);
  --color-focus:         var(--clay-400);

  /* Status tags */
  --status-live-bg:      #e3ead9;
  --status-live-fg:      var(--moss-500);
  --status-alpha-bg:     #f3e6c9;
  --status-alpha-fg:     var(--honey-500);
  --status-upcoming-bg:  var(--paper-200);
  --status-upcoming-fg:  var(--ink-600);

  /* ---------- 3. Type ---------- */
  --font-body: "Iosevka Aile", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* The big "lofi-engineering." name. Share Tech Mono only has a 400 weight. */
  --font-wordmark: "Share Tech Mono", var(--font-body);
  --weight-wordmark: 400;
  --tracking-wordmark: -0.02em;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.375rem;
  --text-hero: clamp(2.25rem, 6vw, 3.5rem);

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-bold:    650;

  --leading-tight: 1.15;
  --leading-body:  1.6;

  /* ---------- Space ---------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;

  --page-max: 64rem;
  --page-gutter: clamp(1rem, 4vw, 2rem);

  /* ---------- Shape ---------- */
  --radius-sm:   0.5rem;
  --radius-md:   0.875rem;
  --radius-lg:   1.25rem;
  --radius-pill: 999px;
  --border-width: 1px;

  /* Soft, layered shadows: the "tactile" feel. */
  --shadow-rest:  0 1px 0 rgb(47 43 38 / 0.04), 0 2px 6px rgb(47 43 38 / 0.06);
  --shadow-lift:  0 1px 0 rgb(47 43 38 / 0.04), 0 8px 24px rgb(47 43 38 / 0.10);
  --shadow-press: inset 0 1px 3px rgb(47 43 38 / 0.10);

  /* Paper grain overlay. Set to 0 to turn off. */
  --grain-opacity: 0.05;

  /* ---------- Motion ---------- */
  --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 120ms;
  --duration-base: 220ms;
  --lift-distance: -2px;

  color-scheme: light;
}

/* ---------- Dark: semantic remap ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg:            #1c1a17;
    --color-surface:       #252220;
    --color-surface-hover: #2c2926;
    --color-border:        #3a3632;
    --color-text:          #efe9df;
    --color-text-muted:    #b5ada1;
    --color-text-faint:    #857d72;
    --color-accent:        var(--clay-400);
    --color-focus:         var(--clay-400);

    --status-live-bg:      #2c3327;
    --status-live-fg:      var(--moss-400);
    --status-alpha-bg:     #3a3122;
    --status-alpha-fg:     var(--honey-400);
    --status-upcoming-bg:  #2f2b27;
    --status-upcoming-fg:  #b5ada1;

    --shadow-rest:  0 1px 0 rgb(0 0 0 / 0.2), 0 2px 6px rgb(0 0 0 / 0.25);
    --shadow-lift:  0 1px 0 rgb(0 0 0 / 0.2), 0 10px 28px rgb(0 0 0 / 0.4);
    --shadow-press: inset 0 1px 3px rgb(0 0 0 / 0.4);
    --grain-opacity: 0.07;

    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --color-bg:            #1c1a17;
  --color-surface:       #252220;
  --color-surface-hover: #2c2926;
  --color-border:        #3a3632;
  --color-text:          #efe9df;
  --color-text-muted:    #b5ada1;
  --color-text-faint:    #857d72;
  --color-accent:        var(--clay-400);
  --color-focus:         var(--clay-400);

  --status-live-bg:      #2c3327;
  --status-live-fg:      var(--moss-400);
  --status-alpha-bg:     #3a3122;
  --status-alpha-fg:     var(--honey-400);
  --status-upcoming-bg:  #2f2b27;
  --status-upcoming-fg:  #b5ada1;

  --shadow-rest:  0 1px 0 rgb(0 0 0 / 0.2), 0 2px 6px rgb(0 0 0 / 0.25);
  --shadow-lift:  0 1px 0 rgb(0 0 0 / 0.2), 0 10px 28px rgb(0 0 0 / 0.4);
  --shadow-press: inset 0 1px 3px rgb(0 0 0 / 0.4);
  --grain-opacity: 0.07;

  color-scheme: dark;
}