/* ============================================================
   WAIKEUP — design tokens · "Dawn"
   Color · Type · Space · Radius · Motion · Elevation
   Source of truth: waikeup-fresh/lib/theme.ts (live app)
   ============================================================
   Dawn is a warm plum/midnight sky with glass surfaces, cream
   text, and a dawn accent family (coral · gold · violet · sage
   · sky · plum · rose · sand). The app ships dark-only — there
   is no light theme. Coral is the primary action; sage is the
   brand signature dot.
   ============================================================ */

/* ---------- Fonts ----------
   The app embeds ONE custom face: Instrument Serif (regular +
   italic) — the editorial display/headline/numeral voice. All
   UI text uses the platform system sans (SF Pro on iOS). For
   web previews we load Geist as a faithful stand-in for SF Pro,
   plus Geist Mono for code/system meta. */
@import url("https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500;600&family=Instrument+Serif:ital@0;1&display=swap");

:root {
  /* ---------- Sky / canvas (the signature dark ground) ---------- */
  --wk-canvas:      #15102a;   /* base app background */
  --wk-sky-top:     #4a335a;   /* gradient stop 0   */
  --wk-sky-mid:     #2c2046;   /* gradient stop 35% */
  --wk-sky-low:     #1a1430;   /* gradient stop 70% */
  --wk-sky-bottom:  #15102a;   /* gradient stop 100%*/
  --wk-surface-modal: #241b3e; /* opaque surface for sheets over a scrim */

  /* Full-screen sky — use as the app/page background */
  --wk-sky: linear-gradient(180deg,
              var(--wk-sky-top)    0%,
              var(--wk-sky-mid)   35%,
              var(--wk-sky-low)   70%,
              var(--wk-sky-bottom) 100%);

  /* ---------- Legacy aliases → Dawn values ----------
     Names preserved so component cards keep resolving; values
     are now the Dawn canvas/glass ladder. */
  --wk-paper:       var(--wk-canvas);
  --wk-paper-soft:  #1a1430;

  /* ---------- Glass surfaces (warm cream transparency on dark) ---------- */
  --wk-glass:        rgba(255, 247, 235, 0.045);  /* default card */
  --wk-glass-strong: rgba(255, 247, 235, 0.075);
  --wk-elevated:     rgba(255, 247, 235, 0.045);
  --wk-elevated-2:   rgba(255, 247, 235, 0.080);
  --wk-elevated-3:   rgba(255, 247, 235, 0.110);

  --wk-surface:     rgba(255, 247, 235, 0.045);   /* card surface (glass) */
  --wk-surface-2:   rgba(255, 247, 235, 0.080);   /* nested card / input */
  --wk-surface-3:   rgba(255, 247, 235, 0.110);   /* selected / pressed */

  /* ---------- Text — warm cream ---------- */
  --wk-text:           #f6efe3;
  --wk-text-secondary: rgba(246, 239, 227, 0.62);
  --wk-text-tertiary:  rgba(246, 239, 227, 0.40);
  --wk-text-faint:     rgba(246, 239, 227, 0.22);

  /* Legacy ink aliases → cream ladder */
  --wk-ink-1:       #f6efe3;                      /* primary text */
  --wk-ink-2:       rgba(246, 239, 227, 0.62);    /* secondary / body */
  --wk-ink-3:       rgba(246, 239, 227, 0.40);    /* tertiary / meta */
  --wk-ink-4:       rgba(246, 239, 227, 0.22);    /* placeholder / faint */

  --wk-hairline:        rgba(255, 247, 235, 0.085);  /* dividers / card outlines */
  --wk-hairline-strong: rgba(255, 247, 235, 0.16);   /* input borders */
  --wk-border:          rgba(255, 247, 235, 0.16);
  --wk-scrim:           rgba(10, 7, 22, 0.66);        /* modal backdrop */
  --wk-tabbar:          rgba(15, 10, 26, 0.82);       /* blurred chrome fill */

  /* ---------- Dawn accent family ---------- */
  --wk-coral:   #ff9b6e;   /* PRIMARY action · FAB · active tab · checks */
  --wk-gold:    #f5c451;   /* warning · streaks · learning */
  --wk-violet:  #c4b1ef;   /* AI / synthesis · business */
  --wk-sage:    #9bc3a5;   /* brand signature dot · success · health */
  --wk-sky:     #94b3e8;   /* info · career · meetings */
  --wk-plum:    #b39ddb;   /* soft secondary violet */
  --wk-rose:    #e3a6b0;   /* family */
  --wk-sand:    #cdb190;   /* finance */
  --wk-red:     #e57b85;   /* danger / problem */

  /* Primary accent (coral) — tints for buttons, fills, active states */
  --wk-accent:        #ff9b6e;
  --wk-accent-hover:  #ff8552;
  --wk-accent-soft:   rgba(255, 155, 110, 0.16);   /* tint background */
  --wk-accent-line:   rgba(255, 155, 110, 0.34);   /* tint border */
  --wk-accent-ink:    #ffb88a;                     /* on-tint text (lighter) */

  /* FAB / primary gradient (warm coral) */
  --wk-grad-fab: linear-gradient(135deg, #ffb88a 0%, #ff8552 100%);

  /* Sage signature — tints (used for success, the wordmark dot) */
  --wk-sage-hover:  #b4d3bc;
  --wk-sage-soft:   rgba(155, 195, 165, 0.16);
  --wk-sage-line:   rgba(155, 195, 165, 0.32);
  --wk-sage-ink:    #c5ddcb;

  /* Generic accent tints reused by chip/tag cards (Dawn-toned) */
  --wk-clay:        #ff9b6e;                       /* → coral */
  --wk-clay-soft:   rgba(255, 155, 110, 0.16);
  --wk-sand-soft:   rgba(205, 177, 144, 0.18);
  --wk-mist:        #94b3e8;                       /* → sky */
  --wk-mist-soft:   rgba(148, 179, 232, 0.16);

  /* ---------- Area tokens (1:1 with theme.ts) ---------- */
  --wk-area-health:     #9bc3a5;   /* sage   */
  --wk-area-career:     #94b3e8;   /* sky    */
  --wk-area-business:   #c4b1ef;   /* violet */
  --wk-area-family:     #e3a6b0;   /* rose   */
  --wk-area-learning:   #f5c451;   /* gold   */
  --wk-area-creativity: #ff9b6e;   /* coral  */
  --wk-area-finance:    #cdb190;   /* sand   */
  --wk-area-system:     rgba(246, 239, 227, 0.55);

  /* ---------- Semantic state colors ---------- */
  --wk-success:     #9bc3a5;
  --wk-warning:     #f5c451;
  --wk-danger:      #e57b85;
  --wk-info:        #94b3e8;

  /* ---------- Typography stacks ----------
     Sans = platform system face in production (SF Pro); Geist is
     the web stand-in used here. Serif = the one embedded face. */
  --wk-font-sans: "Geist", system-ui, -apple-system, "SF Pro Text",
                  "Helvetica Neue", Arial, sans-serif;
  --wk-font-serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --wk-font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ---------- Type scale (semantic) ---------- */
  --wk-fs-eyebrow:    10.5px; --wk-lh-eyebrow:    14px;  --wk-ls-eyebrow:    0.21em;
  --wk-fs-caption:    12px;   --wk-lh-caption:    16px;  --wk-ls-caption:    0.01em;
  --wk-fs-footnote:   13px;   --wk-lh-footnote:   18px;  --wk-ls-footnote:    0em;
  --wk-fs-subhead:    15px;   --wk-lh-subhead:    21px;  --wk-ls-subhead:   -0.005em;
  --wk-fs-body:       16px;   --wk-lh-body:       23px;  --wk-ls-body:      -0.01em;
  --wk-fs-headline:   17px;   --wk-lh-headline:   22px;  --wk-ls-headline:  -0.012em;
  --wk-fs-t3:         20px;   --wk-lh-t3:         26px;  --wk-ls-t3:        -0.015em;
  --wk-fs-t2:         24px;   --wk-lh-t2:         30px;  --wk-ls-t2:        -0.020em;
  --wk-fs-t1:         28px;   --wk-lh-t1:         34px;  --wk-ls-t1:        -0.022em;
  --wk-fs-display:    34px;   --wk-lh-display:    40px;  --wk-ls-display:   -0.026em;
  --wk-fs-hero:       52px;   --wk-lh-hero:       56px;  --wk-ls-hero:      -0.030em;

  /* ---------- Spacing (4px base, from theme.ts) ---------- */
  --wk-sp-px: 1px;
  --wk-sp-1:  4px;    /* s    */
  --wk-sp-2:  8px;    /* m    */
  --wk-sp-3:  12px;   /* base */
  --wk-sp-4:  16px;   /* lg   */
  --wk-sp-5:  20px;   /* xl   */
  --wk-sp-6:  24px;   /* xxl  */
  --wk-sp-8:  32px;   /* xxxl */
  --wk-sp-12: 48px;   /* huge */
  /* legacy step kept for cards that reference it */
  --wk-sp-10: 40px;
  --wk-sp-16: 64px;

  /* ---------- Radii (from theme.ts) ---------- */
  --wk-r-icon:   12px;
  --wk-r-button: 14px;
  --wk-r-toggle: 16px;
  --wk-r-tile:   18px;
  --wk-r-card:   22px;
  --wk-r-chip:  999px;
  --wk-r-pill:  999px;
  --wk-r-sheet:  24px;

  /* ---------- Elevation ----------
     Dawn cards carry no shadow — separation is the glass fill +
     hairline. Shadows are deep & cool, reserved for the FAB and
     floating menus, and often glow with the accent. */
  --wk-shadow-none:  none;
  --wk-shadow-soft:  0 1px 2px rgba(0, 0, 0, 0.20);
  --wk-shadow-float: 0 14px 32px rgba(0, 0, 0, 0.45), 0 4px 10px rgba(0, 0, 0, 0.30);
  --wk-shadow-pop:   0 18px 48px rgba(0, 0, 0, 0.55), 0 6px 14px rgba(0, 0, 0, 0.35);
  --wk-shadow-sheet: 0 -2px 40px rgba(0, 0, 0, 0.45);
  --wk-shadow-fab:   0 8px 24px rgba(255, 133, 82, 0.45);  /* coral glow */

  /* ---------- Motion (from theme.ts) ---------- */
  --wk-ease:        cubic-bezier(0.32, 0.72, 0, 1);
  --wk-ease-inout:  cubic-bezier(0.65, 0, 0.35, 1);
  --wk-dur-fast:    150ms;
  --wk-dur-base:    200ms;
  --wk-dur-slow:    320ms;

  /* ---------- Layout ---------- */
  --wk-gutter:        20px;
  --wk-screen-w:      390px;
  --wk-tabbar-h:      84px;
  --wk-content-max:   720px;
}

/* ============================================================
   BASE — apply tokens to plain HTML
   ============================================================ */

html, body {
  margin: 0;
  padding: 0;
  background: var(--wk-canvas);
  color: var(--wk-text);
  font-family: var(--wk-font-sans);
  font-size: var(--wk-fs-body);
  line-height: var(--wk-lh-body);
  letter-spacing: var(--wk-ls-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";
}

/* ---------- Semantic type classes ---------- */
.wk-eyebrow {
  font-size: var(--wk-fs-eyebrow); line-height: var(--wk-lh-eyebrow);
  letter-spacing: var(--wk-ls-eyebrow);
  font-weight: 600; text-transform: uppercase;
  color: var(--wk-text-tertiary);
}
.wk-caption  { font-size: var(--wk-fs-caption);  line-height: var(--wk-lh-caption);  letter-spacing: var(--wk-ls-caption);  color: var(--wk-text-tertiary); }
.wk-footnote { font-size: var(--wk-fs-footnote); line-height: var(--wk-lh-footnote); letter-spacing: var(--wk-ls-footnote); color: var(--wk-text-secondary); }
.wk-subhead  { font-size: var(--wk-fs-subhead);  line-height: var(--wk-lh-subhead);  letter-spacing: var(--wk-ls-subhead);  color: var(--wk-text-secondary); }
.wk-body     { font-size: var(--wk-fs-body);     line-height: var(--wk-lh-body);     letter-spacing: var(--wk-ls-body);     color: var(--wk-text); }
.wk-headline { font-size: var(--wk-fs-headline); line-height: var(--wk-lh-headline); letter-spacing: var(--wk-ls-headline); color: var(--wk-text); font-weight: 600; }
.wk-t3       { font-size: var(--wk-fs-t3);       line-height: var(--wk-lh-t3);       letter-spacing: var(--wk-ls-t3);       color: var(--wk-text); font-weight: 600; }
.wk-t2       { font-size: var(--wk-fs-t2);       line-height: var(--wk-lh-t2);       letter-spacing: var(--wk-ls-t2);       color: var(--wk-text); font-weight: 600; }
.wk-t1       { font-size: var(--wk-fs-t1);       line-height: var(--wk-lh-t1);       letter-spacing: var(--wk-ls-t1);       color: var(--wk-text); font-weight: 700; }
.wk-display  { font-size: var(--wk-fs-display);  line-height: var(--wk-lh-display);  letter-spacing: var(--wk-ls-display);  color: var(--wk-text); font-weight: 700; }
.wk-hero     { font-size: var(--wk-fs-hero);     line-height: var(--wk-lh-hero);     letter-spacing: var(--wk-ls-hero);     color: var(--wk-text); font-weight: 700; }

.wk-serif    { font-family: var(--wk-font-serif); font-style: italic; font-weight: 400; letter-spacing: -0.01em; }
.wk-mono     { font-family: var(--wk-font-mono); font-feature-settings: "tnum"; }

.wk-mute     { color: var(--wk-text-tertiary); }
.wk-faint    { color: var(--wk-text-faint); }
.wk-coral-text { color: var(--wk-coral); }
.wk-sage-text  { color: var(--wk-sage); }

/* ---------- Default HTML elements ---------- */
h1 { font-size: var(--wk-fs-display); line-height: var(--wk-lh-display); letter-spacing: var(--wk-ls-display); font-weight: 700; margin: 0; }
h2 { font-size: var(--wk-fs-t1);      line-height: var(--wk-lh-t1);      letter-spacing: var(--wk-ls-t1);      font-weight: 700; margin: 0; }
h3 { font-size: var(--wk-fs-t2);      line-height: var(--wk-lh-t2);      letter-spacing: var(--wk-ls-t2);      font-weight: 600; margin: 0; }
h4 { font-size: var(--wk-fs-t3);      line-height: var(--wk-lh-t3);      letter-spacing: var(--wk-ls-t3);      font-weight: 600; margin: 0; }
h5 { font-size: var(--wk-fs-headline);line-height: var(--wk-lh-headline);letter-spacing: var(--wk-ls-headline);font-weight: 600; margin: 0; }
p  { margin: 0; }
small { font-size: var(--wk-fs-footnote); color: var(--wk-text-tertiary); }
code, pre { font-family: var(--wk-font-mono); }

/* ---------- Reset for examples ---------- */
*, *::before, *::after { box-sizing: border-box; }
button { font-family: inherit; }