/* ---------------------------------------------------------------
   moiki-presskit — design tokens (v2)
   Aesthetic: Modern Indie Studio — bright, confident, vibrant accents,
   contemporary grotesque display, generous whitespace. Aligned with
   Moiki's universe (storytelling app, not literary journal).
   --------------------------------------------------------------- */

:root {
  /* ---------- Type families ---------- */
  --font-display: 'Bricolage Grotesque', ui-sans-serif, system-ui,
                  -apple-system, 'Segoe UI Variable', 'Segoe UI', Roboto,
                  sans-serif;
  --font-body:    'DM Sans', ui-sans-serif, system-ui, -apple-system,
                  'Segoe UI Variable', 'Segoe UI', Roboto, sans-serif;
  --font-mono:    ui-monospace, 'JetBrains Mono', SFMono-Regular, Menlo,
                  Consolas, monospace;

  /* ---------- Type scale ---------- */
  --fz-0:  0.75rem;   /* 12  — micro labels */
  --fz-1:  0.8125rem; /* 13  — meta */
  --fz-2:  0.9375rem; /* 15  — UI body */
  --fz-3:  1.0625rem; /* 17  — body copy */
  --fz-4:  1.25rem;   /* 20  — pull / lead */
  --fz-5:  1.625rem;  /* 26  — section h2 */
  --fz-6:  2.5rem;    /* 40  — display medium */
  --fz-7:  3.75rem;   /* 60  — display large */
  --fz-8:  clamp(3.25rem, 6.5vw + 1rem, 6rem); /* hero / landing */

  --lh-tight:    1.04;
  --lh-snug:     1.22;
  --lh-normal:   1.45;
  --lh-relaxed:  1.62;

  --tracking-tight:    -0.022em;
  --tracking-display:  -0.038em;
  --tracking-normal:    0;
  --tracking-wide:      0.02em;
  --tracking-wider:     0.075em;
  --tracking-widest:    0.18em;

  /* ---------- Light theme — clean, bright, contemporary ---------- */
  --bg:              #fbfaf6;   /* almost white, faint warm cast */
  --bg-elev:         #ffffff;   /* pure white surface for cards */
  --bg-deep:         #f1ede1;   /* subtle band */
  --fg:              #0e0d0a;   /* near-black with warmth, not pure */
  --fg-soft:         #4a4940;
  --fg-muted:        #75736a;
  --fg-faint:        #a4a298;
  --rule:            #e8e4d6;
  --rule-strong:     #c8c2ad;

  /* ---------- Component aliases (kept for compatibility) ---------- */
  --color-bg:          var(--bg);
  --color-bg-elev:     var(--bg-elev);
  --color-bg-deep:     var(--bg-deep);
  --color-fg:          var(--fg);
  --color-fg-muted:    var(--fg-soft);
  --color-fg-faint:    var(--fg-muted);
  --color-line:        var(--rule);
  --color-line-strong: var(--rule-strong);

  /* ---------- Accent (overridden per product) ---------- */
  --accent:        #0e0d0a;
  --accent-deep:   #0e0d0a;
  --accent-fg:     #fbfaf6;
  --accent-tint:   #0e0d0a14;
  --accent-glow:   #0e0d0a00;
  --color-accent:    var(--accent);
  --color-accent-fg: var(--accent-fg);
  --color-focus:     var(--accent);

  /* ---------- Spacing ---------- */
  --sp-0:  0.125rem;
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.5rem;
  --sp-6:  2rem;
  --sp-7:  3rem;
  --sp-8:  4.5rem;
  --sp-9:  7rem;
  --sp-10: 10rem;

  /* ---------- Radii — friendlier, indie product feel ---------- */
  --r-1: 4px;
  --r-2: 8px;
  --r-3: 14px;
  --r-4: 22px;
  --r-pill: 999px;

  /* ---------- Shadows ---------- */
  --sh-1: 0 1px 2px rgba(14, 13, 10, 0.06), 0 1px 1px rgba(14, 13, 10, 0.04);
  --sh-2: 0 12px 32px rgba(14, 13, 10, 0.08), 0 4px 10px rgba(14, 13, 10, 0.04);
  --sh-glow: 0 0 0 6px var(--accent-glow);

  /* ---------- Layout ---------- */
  --measure: 64ch;
  --measure-tight: 50ch;
  --container: 78rem;
  --gutter: clamp(1.25rem, 4vw, 3rem);

  /* ---------- Motion ---------- */
  --easing-standard: cubic-bezier(0.2, 0.7, 0.1, 1);
  --easing-emph:     cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Per-product accent ---------- */
[data-product='moiki'] {
  --accent:      #ff6a3d;
  --accent-deep: #e8521f;
  --accent-fg:   #ffffff;
  --accent-tint: #ff6a3d22;
  --accent-glow: #ff6a3d33;
  --color-focus: #ff6a3d;
}
[data-product='moiki-edu'] {
  --accent:      #1f8aff;
  --accent-deep: #1466cc;
  --accent-fg:   #ffffff;
  --accent-tint: #1f8aff22;
  --accent-glow: #1f8aff33;
  --color-focus: #1f8aff;
}
[data-product='landing'] {
  --accent:      #0e0d0a;
  --accent-deep: #0e0d0a;
  --accent-fg:   #fbfaf6;
  --accent-tint: #0e0d0a14;
  --accent-glow: #0e0d0a14;
  --color-focus: #0e0d0a;
}
[data-product='admin'] {
  --accent:      #0e0d0a;
  --accent-deep: #0e0d0a;
  --accent-fg:   #fbfaf6;
  --accent-tint: #0e0d0a14;
  --accent-glow: #0e0d0a00;
  --color-focus: #0e0d0a;
}

/* ---------- Dark theme ---------- */
/* Applied either via system preference (when no manual override),
   or explicitly via [data-theme='dark'] on <html>. */

/* Reusable variable bundles via custom properties wouldn't help here —
   we duplicate the dark-mode declarations across selectors. */

:root[data-theme='dark'] {
  --bg:           #0c0d10;
  --bg-elev:      #15171c;
  --bg-deep:      #1c1f25;
  --fg:           #f3f1ec;
  --fg-soft:      #c5c1b8;
  --fg-muted:     #8c8a82;
  --fg-faint:     #5e5d57;
  --rule:         #262a31;
  --rule-strong:  #3a3f48;
}
:root[data-theme='dark'][data-product='moiki'] {
  --accent:      #ff8459;
  --accent-deep: #ff9b76;
  --accent-fg:   #15110b;
  --accent-tint: #ff84592a;
  --accent-glow: #ff84593a;
  --color-focus: #ff8459;
}
:root[data-theme='dark'][data-product='moiki-edu'] {
  --accent:      #5cb0ff;
  --accent-deep: #87c5ff;
  --accent-fg:   #0a1626;
  --accent-tint: #5cb0ff2a;
  --accent-glow: #5cb0ff3a;
  --color-focus: #5cb0ff;
}
:root[data-theme='dark'][data-product='landing'] {
  --accent:      #f3f1ec;
  --accent-deep: #f3f1ec;
  --accent-fg:   #0c0d10;
  --accent-tint: #f3f1ec1a;
  --accent-glow: #f3f1ec0e;
  --color-focus: #f3f1ec;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg:           #0c0d10;
    --bg-elev:      #15171c;
    --bg-deep:      #1c1f25;
    --fg:           #f3f1ec;
    --fg-soft:      #c5c1b8;
    --fg-muted:     #8c8a82;
    --fg-faint:     #5e5d57;
    --rule:         #262a31;
    --rule-strong:  #3a3f48;
  }
  :root:not([data-theme='light'])[data-product='moiki'] {
    --accent:      #ff8459;
    --accent-deep: #ff9b76;
    --accent-fg:   #15110b;
    --accent-tint: #ff84592a;
    --accent-glow: #ff84593a;
    --color-focus: #ff8459;
  }
  :root:not([data-theme='light'])[data-product='moiki-edu'] {
    --accent:      #5cb0ff;
    --accent-deep: #87c5ff;
    --accent-fg:   #0a1626;
    --accent-tint: #5cb0ff2a;
    --accent-glow: #5cb0ff3a;
    --color-focus: #5cb0ff;
  }
  :root:not([data-theme='light'])[data-product='landing'] {
    --accent:      #f3f1ec;
    --accent-deep: #f3f1ec;
    --accent-fg:   #0c0d10;
    --accent-tint: #f3f1ec1a;
    --accent-glow: #f3f1ec0e;
    --color-focus: #f3f1ec;
  }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}