/* ============================================================
   OneADay Design System — Colors & Type
   A cozy, playful, paper-feel system shared across
   Cookbook, Puzzlebook and Taskbook.
   ============================================================ */

/* ---------- Fonts ---------- */
/* YeonSung — used ONLY for the "OneADay" wordmark / brand logo. */
@font-face {
  font-family: "YeonSung";
  src: url("../fonts/yeonsung-regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
/* Playpen Sans — used for ALL other copy (UI, headings, body). Variable 100–800. */
@font-face {
  font-family: "Playpen Sans";
  src: url("../fonts/playpensans-variable.woff2") format("woff2");
  font-weight: 100 800;
  font-display: swap;
}

:root {
  /* ============ CORE PALETTE ============ */
  /* Paper / surfaces — warm cream, the canvas of the whole brand */
  --paper:        #f5efe6;  /* app background */
  --paper-warm:   #f6efe5;  /* puzzlebook screen tone */
  --surface:      #fbf8f2;  /* raised cards on paper */
  --surface-2:    #f7f5ef;  /* alt card / bowl cream */
  --surface-sunk: #ece5d8;  /* sunken wells, tracks */

  /* Ink — warm near-black, never pure #000 */
  --ink:          #20201c;  /* primary text & hand-drawn strokes */
  --ink-soft:     #3a3a34;  /* secondary text */
  --ink-muted:    #707975;  /* tertiary text, tags, captions */
  --ink-faint:    #a59f93;  /* placeholders, disabled */

  /* Borders / hand-drawn lines */
  --line:         #d9d0c0;  /* hairline dividers on paper */
  --line-ink:     #2c2c26;  /* deliberate dark drawn outline */

  /* ============ BRAND ACCENTS (the four dots) ============ */
  --gold:    #d7b45c;  /* mustard yellow */
  --sage:    #7c956f;  /* muted leaf green */
  --slate:   #6aa5b8;  /* dusty slate blue */
  --rust:    #b07259;  /* terracotta / clay */

  /* tints (≈18% on paper) for fills, chips, highlight cells */
  --gold-tint:  #efe2c2;
  --sage-tint:  #dde3d6;
  --slate-tint: #d6e6ec;
  --rust-tint:  #ecd8cf;

  /* ============ COOKBOOK ============ */
  --cook-green:        #1d3a2f;  /* deep forest — primary brand */
  --cook-green-btn:    #375a51;  /* button / interactive green */
  --cook-green-deep:   #0d2e28;  /* icon background */
  --cook-green-tint:   #e3eae3;  /* soft green panels */

  /* ============ PUZZLEBOOK ============ */
  --bezel:        #362602;  /* dark olive phone-frame ink */
  --plum:         #7d5a7a;  /* binairo accent */
  /* per-game accents */
  --game-sudoku:     var(--slate);
  --game-tectonic:   var(--sage);
  --game-wordguess:  var(--rust);
  --game-wordseeker: var(--gold);
  --game-binairo:    var(--plum);
  --game-ohno:       #c0584f;
  --game-tenttree:   #6f7a3f;

  /* ============ SEMANTIC ============ */
  --danger:   #c14d4c;  /* delete / clear all */
  --danger-soft: #e8cfcc;
  --success:  var(--sage);
  --warning:  var(--gold);
  --link:     var(--cook-green-btn);
  --favorite: #d8504e;  /* filled heart */

  /* ============ RADII ============ */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-pill: 999px;

  /* ============ SHADOWS / ELEVATION ============ */
  /* soft, warm, low-contrast — never harsh grey */
  --shadow-sm: 0 1px 2px rgba(54,38,2,.06), 0 1px 3px rgba(54,38,2,.05);
  --shadow-md: 0 2px 6px rgba(54,38,2,.07), 0 6px 16px rgba(54,38,2,.06);
  --shadow-lg: 0 8px 28px rgba(54,38,2,.10);
  --ring-focus: 0 0 0 3px rgba(106,165,184,.45);

  /* ============ SPACING (4px base) ============ */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;

  /* ============ TYPE FAMILIES ============ */
  --font-brand: "YeonSung", "Playpen Sans", system-ui, sans-serif;
  --font-ui:    "Playpen Sans", ui-rounded, "Segoe UI", system-ui, sans-serif;

  /* ============ TYPE SCALE (semantic) ============ */
  /* Playpen Sans is a casual hand font — it reads large; keep weights modest */
  --logo-size:   40px;   --logo-weight:   400;  /* YeonSung wordmark */
  --display:     44px;   --display-weight: 600; --display-lh: 1.08;
  --h1:          30px;   --h1-weight:     700;  --h1-lh: 1.15;
  --h2:          22px;   --h2-weight:     700;  --h2-lh: 1.2;
  --h3:          18px;   --h3-weight:     600;  --h3-lh: 1.25;
  --body:        16px;   --body-weight:   400;  --body-lh: 1.5;
  --body-strong-weight: 600;
  --small:       14px;   --small-lh: 1.45;
  --caption:     12px;   --caption-weight: 600; /* eyebrow / UPPERCASE labels */
  --caption-track: .08em;
}

/* ---------- Semantic element defaults ---------- */
.oad-logo {
  font-family: var(--font-brand);
  font-size: var(--logo-size);
  font-weight: var(--logo-weight);
  color: var(--ink);
  letter-spacing: .01em;
}
h1, .h1 { font-family: var(--font-ui); font-size: var(--h1); font-weight: var(--h1-weight); line-height: var(--h1-lh); color: var(--ink); }
h2, .h2 { font-family: var(--font-ui); font-size: var(--h2); font-weight: var(--h2-weight); line-height: var(--h2-lh); color: var(--ink); }
h3, .h3 { font-family: var(--font-ui); font-size: var(--h3); font-weight: var(--h3-weight); line-height: var(--h3-lh); color: var(--ink); }
.display { font-family: var(--font-ui); font-size: var(--display); font-weight: var(--display-weight); line-height: var(--display-lh); color: var(--ink); }
p, .body { font-family: var(--font-ui); font-size: var(--body); font-weight: var(--body-weight); line-height: var(--body-lh); color: var(--ink-soft); }
.small { font-size: var(--small); line-height: var(--small-lh); color: var(--ink-muted); }
.eyebrow {
  font-family: var(--font-ui);
  font-size: var(--caption);
  font-weight: var(--caption-weight);
  letter-spacing: var(--caption-track);
  text-transform: uppercase;
  color: var(--rust);
}