/* ============================================================
   Seekadu Design Tokens
   Colors + Type + Radii + Shadows + Motion
   ============================================================ */

/* ---------- Fonts: SansSerif FLF (brand typeface) ----------
   Geometric sans in the Futura family. Four optical sizes:
   Book (light/400), FLF (medium/500), Demibold (600),
   Bold (700), Extra Bold (900). Italic + condensed variants included.
   Use 'SansSerif FLF Cond' (separate family) for condensed display.
*/

@font-face {
  font-family: 'SansSerif FLF';
  src: url('/fonts/SansSerifBookFLF.otf') format('opentype');
  font-weight: 300 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'SansSerif FLF';
  src: url('/fonts/SansSerifBookFLF-Italic.otf') format('opentype');
  font-weight: 300 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'SansSerif FLF';
  src: url('/fonts/SansSerifFLF.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'SansSerif FLF';
  src: url('/fonts/SansSerifFLF-Italic.otf') format('opentype');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'SansSerif FLF';
  src: url('/fonts/SansSerifFLF-Demibold.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'SansSerif FLF';
  src: url('/fonts/SansSerifFLF-DemiItalic.otf') format('opentype');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'SansSerif FLF';
  src: url('/fonts/SansSerifBldFLF.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'SansSerif FLF';
  src: url('/fonts/SansSerifBldFLF-Italic.otf') format('opentype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'SansSerif FLF';
  src: url('/fonts/SansSerifExbFLF.otf') format('opentype');
  font-weight: 800 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'SansSerif FLF';
  src: url('/fonts/SansSerifExbFLF-Italic.otf') format('opentype');
  font-weight: 800 900;
  font-style: italic;
  font-display: swap;
}

/* Condensed — separate family (use for display / tight columns) */
@font-face {
  font-family: 'SansSerif FLF Cond';
  src: url('/fonts/SansSerifBldFLFCond.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'SansSerif FLF Cond';
  src: url('/fonts/SansSerifBldFLFCond-Italic.otf') format('opentype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'SansSerif FLF Cond';
  src: url('/fonts/SansSerifExbFLFCond.otf') format('opentype');
  font-weight: 800 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'SansSerif FLF Cond';
  src: url('/fonts/SansSerifExbFLFCond-Italic.otf') format('opentype');
  font-weight: 800 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ================================================
     COLOR — PRIMITIVES
     ================================================ */

  /* Neutrals (near-black scale, used across both modes) */
  --sk-black:        #090909;   /* core brand black — text in light, bg in dark */
  --sk-ink-900:      #0b0b0b;   /* dark-mode surface */
  --sk-ink-800:      #111111;
  --sk-ink-700:      #181818;   /* dark-mode elevated surface */
  --sk-ink-600:      #191919;
  --sk-ink-500:      #1a1a1a;
  --sk-ink-400:      #282828;   /* dark-mode card */
  --sk-ink-300:      #2b2d2e;
  --sk-ink-200:      #44474c;
  --sk-ink-100:      #4b4b4b;

  --sk-gray-900:     #646464;
  --sk-gray-700:     #737373;
  --sk-gray-600:     #8e8e93;   /* iOS secondary label */
  --sk-gray-500:     #ababab;   /* dark-mode secondary text */
  --sk-gray-400:     #bababa;
  --sk-gray-300:     #c1c1c1;   /* muted text */
  --sk-gray-200:     #d9d9d9;
  --sk-gray-150:     #dddddd;
  --sk-gray-100:     #e5e5e5;
  --sk-gray-50:      #f3f3f3;   /* page wash */
  --sk-white:        #ffffff;

  /* Brand accent — violet */
  --sk-violet-400:   #d276e7;   /* gradient start, active link */
  --sk-violet-500:   #af52de;   /* primary violet (glow + fills) */
  --sk-violet-600:   #8832de;   /* gradient end, pressed */
  --sk-violet-glow:  rgba(175, 82, 222, 0.35);   /* shadow / radial-glow token */
  --sk-violet-glow-soft: rgba(175, 82, 222, 0.18);

  /* Pastel gradient (Consumer hero bg) — extracted from bg-pastel-gradient.jpg */
  --sk-pastel-lavender: #e8d9f5;
  --sk-pastel-sky:      #c8def5;
  --sk-pastel-cream:    #fff2e0;
  --sk-pastel-peach:    #fbd6d2;

  /* Semantic */
  --sk-success:      #2ce290;   /* toast, online dot */
  --sk-error:        #ff3b30;   /* iOS red */
  --sk-warning:      #fa4d09;   /* orange — used sparingly */

  /* ================================================
     SEMANTIC — LIGHT (Consumer mode)
     ================================================ */
  --bg-page:         var(--sk-white);
  --bg-surface:      var(--sk-white);
  --bg-elevated:     var(--sk-white);
  --bg-muted:        var(--sk-gray-50);
  --bg-hero:         linear-gradient(135deg, var(--sk-pastel-lavender) 0%, var(--sk-pastel-sky) 40%, var(--sk-pastel-cream) 75%, var(--sk-pastel-peach) 100%);

  --fg-default:      var(--sk-black);
  --fg-muted:        var(--sk-gray-700);
  --fg-subtle:       var(--sk-gray-500);
  --fg-disabled:     var(--sk-gray-300);
  --fg-on-accent:    var(--sk-white);

  --border-default:  var(--sk-gray-100);
  --border-strong:   var(--sk-black);
  --border-subtle:   var(--sk-gray-200);

  --accent:          var(--sk-black);        /* primary action in consumer UI is black, not violet */
  --accent-fg:       var(--sk-white);
  --accent-violet:   var(--sk-violet-500);
  --accent-gradient: linear-gradient(180deg, var(--sk-violet-400) 0%, var(--sk-violet-600) 100%);

  /* ================================================
     RADII
     ================================================ */
  --radius-xs:   6px;
  --radius-sm:   10px;
  --radius-md:   15px;    /* small cards, chat bubbles on list */
  --radius-lg:   20px;    /* cards, sheets, inputs */
  --radius-xl:   28px;
  --radius-chat: 52px;    /* pill-shaped chat bubbles (Mobile/Chat-m) */
  --radius-pill: 9999px;
  --radius-full: 50%;

  /* ================================================
     SPACING — 4pt base
     ================================================ */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ================================================
     SHADOWS + GLOWS
     ================================================ */
  --shadow-card:     0 4px 6.5px rgba(0,0,0,0.07), 0 4px 6.5px rgba(0,0,0,0.07);
  --shadow-pill:     0 2px 6.6px rgba(0,0,0,0.11);
  --shadow-sheet:    0 20px 60px rgba(0,0,0,0.12);
  --shadow-violet-glow:  0 0 26.4px var(--sk-violet-glow);
  --shadow-violet-soft:  0 0 80px var(--sk-violet-glow-soft);
  --shadow-composer: 0 0 26.4px var(--sk-violet-glow), 0 1px 2px rgba(0,0,0,0.04);

  /* Protection gradient — when text sits on an image */
  --protect-top:    linear-gradient(180deg, rgba(0,0,0,0.66) 0%, rgba(0,0,0,0) 60%);
  --protect-bottom: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.66) 100%);
  --protect-wash:   linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 100%);

  /* ================================================
     TYPOGRAPHY
     ================================================ */
  --font-sans:    'SansSerif FLF', ui-sans-serif, system-ui, -apple-system, 'Futura', 'Helvetica Neue', Arial, sans-serif;
  --font-cond:    'SansSerif FLF Cond', 'SansSerif FLF', ui-sans-serif, system-ui, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Type scale — mobile */
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-15: 15px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fs-28: 28px;
  --fs-32: 32px;
  --fs-40: 40px;
  --fs-48: 48px;
  --fs-56: 56px;
  --fs-64: 64px;

  --lh-tight:  1.05;
  --lh-snug:   1.2;
  --lh-normal: 1.4;
  --lh-loose:  1.6;

  /* Weights mapped to SansSerif FLF's four optical sizes:
     Book 400 · FLF 500 · Demibold 600 (wordmark) · Bold 700 · Extra Bold 900 */
  --fw-light:    300;    /* Book, rendered light */
  --fw-regular:  400;    /* Book */
  --fw-medium:   500;    /* FLF */
  --fw-semibold: 600;    /* Demibold — wordmark weight */
  --fw-bold:     700;    /* Bold */
  --fw-black:    900;    /* Extra Bold */

  /* ================================================
     MOTION
     ================================================ */
  --ease-out:     cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-inout:   cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   360ms;

  /* ================================================
     LAYOUT
     ================================================ */
  --max-w-prose:   64ch;
  --max-w-page:    1280px;
  --max-w-wide:    1440px;
  --phone-w:       375px;
}

/* ================================================
   DARK MODE (Business dashboard)
   Apply via [data-theme="dark"] on a parent element.
   ================================================ */
[data-theme="dark"] {
  --bg-page:       var(--sk-black);
  --bg-surface:    var(--sk-ink-700);        /* #181818 */
  --bg-elevated:   var(--sk-ink-400);        /* #282828 */
  --bg-muted:      var(--sk-ink-600);

  --fg-default:    var(--sk-white);
  --fg-muted:      var(--sk-gray-500);       /* #ababab */
  --fg-subtle:     var(--sk-gray-700);
  --fg-disabled:   var(--sk-ink-200);

  --border-default: rgba(255,255,255,0.08);
  --border-strong:  var(--sk-white);
  --border-subtle:  rgba(255,255,255,0.05);

  --accent:        var(--sk-white);
  --accent-fg:     var(--sk-black);

  --shadow-card:   0 4px 20px rgba(0,0,0,0.4);
  --shadow-sheet:  0 20px 60px rgba(0,0,0,0.6);
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   Opt-in: wrap content in .sk-prose or use these as mixins.
   ============================================================ */
.sk-base,
body.sk-base {
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  line-height: var(--lh-normal);
  color: var(--fg-default);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.sk-h1, h1.sk { font: var(--fw-bold) var(--fs-56)/var(--lh-tight) var(--font-sans); letter-spacing: -0.02em; }
.sk-h2, h2.sk { font: var(--fw-bold) var(--fs-40)/var(--lh-snug)  var(--font-sans); letter-spacing: -0.015em; }
.sk-h3, h3.sk { font: var(--fw-bold) var(--fs-28)/var(--lh-snug)  var(--font-sans); letter-spacing: -0.01em; }
.sk-h4, h4.sk { font: var(--fw-semibold) var(--fs-20)/var(--lh-snug) var(--font-sans); }
.sk-h5, h5.sk { font: var(--fw-semibold) var(--fs-18)/var(--lh-snug) var(--font-sans); }

.sk-display { font: var(--fw-bold) var(--fs-64)/var(--lh-tight) var(--font-sans); letter-spacing: -0.025em; }
.sk-body    { font: var(--fw-regular) var(--fs-16)/var(--lh-normal) var(--font-sans); }
.sk-body-lg { font: var(--fw-medium) var(--fs-18)/var(--lh-normal) var(--font-sans); }
.sk-small   { font: var(--fw-regular) var(--fs-14)/var(--lh-normal) var(--font-sans); color: var(--fg-muted); }
.sk-tiny    { font: var(--fw-medium) var(--fs-12)/var(--lh-normal) var(--font-sans); color: var(--fg-muted); letter-spacing: 0.01em; }
.sk-eyebrow { font: var(--fw-semibold) var(--fs-12)/1 var(--font-sans); text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-muted); }

.sk-mono    { font-family: var(--font-mono); font-size: 0.92em; }

/* ============================================================
   PRIMITIVES — used in UI kits + cards
   ============================================================ */
.sk-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: var(--fw-semibold) var(--fs-16)/1 var(--font-sans);
  height: 48px; padding: 0 24px; border-radius: var(--radius-pill);
  background: var(--sk-black); color: var(--sk-white);
  border: 1.5px solid var(--sk-black);
  cursor: pointer; transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}
.sk-btn:hover   { opacity: 0.88; }
.sk-btn:active  { transform: scale(0.97); }

.sk-btn--secondary {
  background: transparent; color: var(--fg-default); border-color: var(--border-strong);
}
.sk-btn--ghost {
  background: transparent; color: var(--fg-default); border-color: transparent;
}
.sk-btn--violet {
  background: var(--accent-gradient); border-color: transparent;
  box-shadow: var(--shadow-violet-glow);
}
.sk-btn--sm { height: 36px; padding: 0 16px; font-size: var(--fs-14); }
.sk-btn--lg { height: 56px; padding: 0 32px; font-size: var(--fs-18); }

.sk-card {
  background: var(--bg-surface); border-radius: var(--radius-lg);
  border: 1px solid var(--border-default); box-shadow: var(--shadow-card);
  padding: var(--space-6);
}

.sk-input {
  height: 48px; padding: 0 18px; border-radius: var(--radius-lg);
  background: var(--bg-surface); color: var(--fg-default);
  border: 1px solid var(--border-default);
  font: var(--fw-medium) var(--fs-16)/1 var(--font-sans);
  outline: none; transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.sk-input:focus { border-color: var(--sk-violet-500); box-shadow: var(--shadow-violet-glow); }

.sk-chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 14px; border-radius: var(--radius-pill);
  border: 1.5px solid var(--border-strong); background: transparent; color: var(--fg-default);
  font: var(--fw-medium) var(--fs-14)/1 var(--font-sans);
}
.sk-chip--filled { background: var(--sk-black); color: var(--sk-white); border-color: var(--sk-black); }
.sk-chip--muted  { border-color: var(--sk-gray-300); color: var(--sk-gray-500); }