/* ============================================================
   PAWNTHER CHESS — Colors, Type & Tokens
   ------------------------------------------------------------
   Warm sketchbook chess trainer. Two product moods share one
   palette: the ADULT (calm/credible) and KID (playful) routes.
   Source of truth: uploads/adults.html, uploads/kids.html,
   the Pawnther logo, and Amigo/Maia mascot art.
   ============================================================ */

/* -------- FONTS -------- */
@font-face {
  font-family: "Fraunces";
  src: url("./fonts/Fraunces-VariableFont.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("./fonts/Fraunces-Italic-VariableFont.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("./fonts/Inter-VariableFont.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("./fonts/Inter-Italic-VariableFont.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Nunito";
  src: url("./fonts/Nunito-VariableFont.ttf") format("truetype-variations");
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nunito";
  src: url("./fonts/Nunito-Italic-VariableFont.ttf") format("truetype-variations");
  font-weight: 200 1000;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Patrick Hand";
  src: url("./fonts/PatrickHand-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ====================================================
     COLOR — PAPER & INK (shared across both routes)
     ==================================================== */
  --paper-50:        #fff9ec;   /* lightest cream (kid paper-2)        */
  --paper-100:       #fffaf2;   /* adult paper / button surface         */
  --paper-200:       #fbf7f0;   /* adult bg-2                           */
  --paper-300:       #fbf4e6;   /* kid paper                            */
  --paper-400:       #f7f1e7;   /* adult bg                             */
  --paper-card:      #fffdf8;   /* card surface                         */
  --paper-cream:     #fffaf0;   /* button text on dark, sketch cards    */

  --ink:             #191714;   /* adult primary text                   */
  --ink-warm:        #26211c;   /* kid primary text / sketch border ink */
  --ink-soft:        #5f5a52;   /* adult body soft                      */
  --ink-soft-warm:   #5f574d;   /* kid body soft                        */
  --ink-muted:       #8f877b;   /* adult muted                          */
  --ink-muted-warm:  #8c7e6b;   /* kid muted                            */

  --line:            #d8cfc1;   /* adult hairline                       */
  --line-strong:     #bcae96;   /* adult emphasized hairline            */
  --line-sketch:     #2e2922;   /* kid 2px sketch border                */
  --line-sketch-soft:rgba(38,33,28,.12); /* kid hairline               */

  /* ====================================================
     COLOR — BRAND ACCENTS
     Adult route uses muted; kid route uses warmer/saturated.
     ==================================================== */
  --gold:            #e39b44;   /* adult gold — Amigo-orange, pairs with Maia black */
  --gold-warm:       #e39b44;   /* kid gold — unified with adult, Amigo-orange */
  --gold-soft:       #f1dfb1;   /* adult tint                           */
  --gold-soft-warm:  #f8df9a;   /* kid tint                             */

  --olive:           #8d9870;
  --olive-soft:      #e7eddc;

  --blue:            #6e8aa0;   /* adult blue                           */
  --blue-warm:       #6faac8;   /* kid blue                             */
  --blue-soft:       #e2ebf0;   /* adult tint                           */
  --blue-soft-warm:  #dff0f6;   /* kid tint                             */

  --rose:            #b77a86;   /* adult Maia rose                      */
  --pink:            #d86a91;   /* kid Maia pink (more vivid)           */
  --rose-soft:       #f3e2e6;
  --pink-soft:       #fde2eb;

  --orange:          #e88742;   /* Amigo scarf orange                   */

  --green:           #77a875;   /* "good move" green                    */
  --green-soft:      #e2f0dc;

  /* Mascot fills */
  --amigo-leopard:   #c98937;   /* Amigo fur base                       */
  --amigo-spot:      #4a321d;
  --maia-panther:    #22252b;   /* Maia / queen panther                 */
  --maia-fur-light:  #343842;

  /* Board piece woods */
  --board-light:     #f7e8cb;
  --board-dark:      #9c8265;
  --board-hot:       #d7b15a;   /* highlight / threatened square        */
  --board-good:      #b8c9a7;   /* recommended square                   */
  --board-frame:     #f0e3c7;   /* board edge wood                      */

  /* Status / semantic */
  --success:         #77a875;
  --warning:         #e39b44;
  --danger:          #b77a86;
  --info:            #6e8aa0;

  /* ====================================================
     ELEVATION & RADII
     ==================================================== */
  --shadow-card:     0 16px 40px rgba(48,37,22,.08);      /* adult card    */
  --shadow-soft:     0 8px  24px rgba(48,37,22,.06);      /* adult subtle  */
  --shadow-sketch:   0 24px 60px rgba(67,45,20,.13);      /* kid panel     */
  --shadow-sketch-s: 0 10px 26px rgba(67,45,20,.10);      /* kid small     */
  --shadow-offset:   4px 5px 0 rgba(38,33,28,.13);        /* kid stamp     */
  --shadow-offset-s: 3px 4px 0 rgba(38,33,28,.12);        /* kid stamp s   */

  --radius-pill:     999px;
  --radius-xs:       10px;
  --radius-sm:       14px;
  --radius-md:       16px;     /* adult default                          */
  --radius-lg:       22px;
  --radius-xl:       28px;     /* sketch card                            */
  --radius-2xl:      32px;
  --radius-3xl:      38px;

  /* ====================================================
     SPACING (4px 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;

  /* ====================================================
     TYPE — families
     ==================================================== */
  --font-display:    "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-ui:         "Inter", system-ui, -apple-system, sans-serif;
  --font-friendly:   "Nunito", system-ui, sans-serif;
  --font-hand:       "Patrick Hand", "Comic Sans MS", cursive;
  --font-mono:       ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ====================================================
     SEMANTIC TYPE TOKENS
     Use these instead of raw font/size in product code.
     ==================================================== */

  /* Display — Fraunces (used on both routes) */
  --type-display-1-family: var(--font-display);
  --type-display-1-size: clamp(52px, 7vw, 92px);
  --type-display-1-weight: 700;
  --type-display-1-tracking: -0.05em;
  --type-display-1-leading: 0.95;

  --type-display-2-family: var(--font-display);
  --type-display-2-size: clamp(36px, 4vw, 56px);
  --type-display-2-weight: 700;
  --type-display-2-tracking: -0.04em;
  --type-display-2-leading: 1;

  --type-h1-family: var(--font-display);
  --type-h1-size: 40px;
  --type-h1-weight: 700;
  --type-h1-tracking: -0.04em;
  --type-h1-leading: 1.05;

  --type-h2-family: var(--font-display);
  --type-h2-size: 28px;
  --type-h2-weight: 700;
  --type-h2-tracking: -0.03em;
  --type-h2-leading: 1.1;

  --type-h3-family: var(--font-display);
  --type-h3-size: 22px;
  --type-h3-weight: 650;
  --type-h3-tracking: -0.03em;
  --type-h3-leading: 1.15;

  /* Body — Inter for adult, Nunito for kid */
  --type-body-family:        var(--font-ui);
  --type-body-family-kid:    var(--font-friendly);
  --type-body-size:          16px;
  --type-body-weight:        500;
  --type-body-leading:       1.55;

  --type-body-large-size:    18px;
  --type-body-small-size:    14px;
  --type-caption-size:       13px;
  --type-micro-size:         12px;

  /* Eyebrow / overline */
  --type-eyebrow-family: var(--font-ui);
  --type-eyebrow-size: 13px;
  --type-eyebrow-weight: 800;
  --type-eyebrow-tracking: 0.08em;
  --type-eyebrow-case: uppercase;

  /* Button */
  --type-button-family: var(--font-ui);
  --type-button-size: 14px;
  --type-button-weight: 800;
  --type-button-tracking: 0.005em;

  /* Sketch / handwritten — Patrick Hand */
  --type-sketch-family: var(--font-hand);
  --type-sketch-size: 20px;
  --type-sketch-weight: 400;
  --type-sketch-leading: 1.1;

  /* ====================================================
     SEMANTIC ROLES — pick these in components
     ==================================================== */
  --bg-canvas:       var(--paper-400);
  --bg-canvas-warm:  var(--paper-300);
  --bg-surface:      var(--paper-card);
  --bg-elevated:     var(--paper-100);
  --bg-ink:          #23201c;     /* dark analysis card                  */

  --fg-default:      var(--ink);
  --fg-default-warm: var(--ink-warm);
  --fg-soft:         var(--ink-soft);
  --fg-muted:        var(--ink-muted);
  --fg-on-dark:      var(--paper-cream);

  --border-default:  var(--line);
  --border-strong:   var(--line-strong);
  --border-sketch:   var(--line-sketch);

  --accent-primary:  var(--gold);
  --accent-maia:     var(--rose);
  --accent-amigo:    var(--orange);

  /* Body radial+noise treatment (adult). Apply on <body>: 
     background: var(--bg-adult); body::before noise overlay. */
  --bg-adult:
    radial-gradient(circle at 12% 12%, rgba(201,150,55,.08), transparent 22%),
    radial-gradient(circle at 88%  9%, rgba(110,138,160,.08), transparent 20%),
    linear-gradient(180deg, var(--paper-200), var(--paper-400));

  --bg-kid:
    radial-gradient(circle at 12% 18%, rgba(248,223,154,.55), transparent 26%),
    radial-gradient(circle at 90% 10%, rgba(253,226,235,.70), transparent 24%),
    radial-gradient(circle at 80% 88%, rgba(223,240,246,.82), transparent 26%),
    linear-gradient(180deg, var(--paper-50), var(--paper-300));

  /* Paper-noise SVG (cite as background-image) */
  --noise-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");

  /* Motion */
  --ease-soft: cubic-bezier(.2,.7,.2,1);
  --ease-pop:  cubic-bezier(.34,1.56,.64,1);
  --dur-fast:  .15s;
  --dur-base:  .2s;
  --dur-slow:  .35s;
}

/* ============================================================
   ELEMENT DEFAULTS — opt-in by linking this file then either
   adding class="route-adult" or class="route-kid" on <body>.
   ============================================================ */

body.route-adult {
  font-family: var(--type-body-family);
  font-size: var(--type-body-size);
  line-height: var(--type-body-leading);
  color: var(--fg-default);
  background: var(--bg-adult);
}
body.route-kid {
  font-family: var(--type-body-family-kid);
  font-size: var(--type-body-size);
  line-height: var(--type-body-leading);
  color: var(--fg-default-warm);
  background: var(--bg-kid);
}

h1, .h1 {
  font-family: var(--type-h1-family);
  font-size: var(--type-h1-size);
  font-weight: var(--type-h1-weight);
  letter-spacing: var(--type-h1-tracking);
  line-height: var(--type-h1-leading);
}
h2, .h2 {
  font-family: var(--type-h2-family);
  font-size: var(--type-h2-size);
  font-weight: var(--type-h2-weight);
  letter-spacing: var(--type-h2-tracking);
  line-height: var(--type-h2-leading);
}
h3, .h3 {
  font-family: var(--type-h3-family);
  font-size: var(--type-h3-size);
  font-weight: var(--type-h3-weight);
  letter-spacing: var(--type-h3-tracking);
  line-height: var(--type-h3-leading);
}

.display-1 {
  font-family: var(--type-display-1-family);
  font-size: var(--type-display-1-size);
  font-weight: var(--type-display-1-weight);
  letter-spacing: var(--type-display-1-tracking);
  line-height: var(--type-display-1-leading);
}
.display-2 {
  font-family: var(--type-display-2-family);
  font-size: var(--type-display-2-size);
  font-weight: var(--type-display-2-weight);
  letter-spacing: var(--type-display-2-tracking);
  line-height: var(--type-display-2-leading);
}

.eyebrow {
  font-family: var(--type-eyebrow-family);
  font-size: var(--type-eyebrow-size);
  font-weight: var(--type-eyebrow-weight);
  letter-spacing: var(--type-eyebrow-tracking);
  text-transform: var(--type-eyebrow-case);
  color: var(--accent-primary);
}

.sketch {
  font-family: var(--type-sketch-family);
  font-size: var(--type-sketch-size);
  line-height: var(--type-sketch-leading);
}

.muted { color: var(--fg-muted); }
.soft  { color: var(--fg-soft); }