@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;500;600;700;800&family=Nunito:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&family=Gochi+Hand&display=swap');
/* Brave Ben's Big Adventures — compiled stylesheet */

/* ===== tokens/fonts.css ===== */
/* Brave Ben's Big Adventures — Webfonts
   Warm, rounded, hand-lettered-feeling families:
     • Baloo 2  → titles, series name, headings (warm, rounded, friendly)
     • Nunito   → body & UI text (rounded terminals, warm, highly readable)
     • Gochi Hand → optional hand-lettered captions / playful accents
   All loaded from Google Fonts. */




/* ===== tokens/colors.css ===== */
/* Brave Ben's Big Adventures — Colour tokens
   A warm watercolour system anchored by Ben's red coat, cooled by his
   denim-blue badge sky, grounded in cosy browns and a warm-charcoal ink.
   Every hue carries a full 50–900 tonal ramp so any surface, text or
   accent has a considered step to reach for. */

:root {
  /* ============================================================
     TONAL RAMPS — raw hues, 50 (lightest) → 900 (deepest)
     ============================================================ */

  /* ---- Paper & cream (warm neutral surfaces) ---- */
  --paper-50:  #fdf9f0;   /* lightest highlight wash */
  --paper-100: #fcf4e6;   /* primary page cream      */
  --paper-200: #f6e8d0;   /* sunk panels / wells     */
  --paper-300: #efdcbe;   /* edges & dividers        */
  --paper-400: #e7d0a8;
  --cream:     #fde6c2;   /* badge lettering cream   */

  /* ---- Ink (warm charcoal — text & UI greys) ---- */
  --ink-50:  #f7f4f1;
  --ink-100: #ece7e1;
  --ink-200: #d8cfc5;
  --ink-300: #b8ab9d;
  --ink-400: #8a7d70;   /* muted text */
  --ink-500: #6b5d50;
  --ink-600: #524539;
  --ink-700: #43382f;   /* body text */
  --ink-800: #2a221c;   /* strong text / headings */
  --ink-900: #1a130e;   /* deepest */

  /* ---- Ben's red (the recurring colour anchor) ---- */
  --red-50:  #fdf0e9;
  --red-100: #fbdccb;
  --red-200: #f4b391;
  --red-300: #ef8a5a;   /* sunlit coat highlight */
  --red-400: #d96237;   /* ribbon terracotta     */
  --red-500: #c4360f;   /* the red coat          */
  --red-600: #a72d0c;   /* coat in shadow        */
  --red-700: #842309;   /* deepest brick         */
  --red-800: #661a06;
  --red-900: #4a1204;

  /* ---- Honey & buttery yellow (warm light, Ben's big book) ---- */
  --honey-50:  #fef8e7;
  --honey-100: #fdf0c8;
  --honey-200: #f9dd95;
  --honey-300: #f4c95d;   /* buttery book yellow */
  --honey-400: #e9a94e;
  --honey-500: #d98e34;   /* golden amber        */
  --honey-600: #b8722a;
  --honey-700: #94591f;
  --honey-800: #6f4318;
  --honey-900: #4d2e10;

  /* ---- Cosy brown (hair, warm earth) ---- */
  --brown-50:  #f6ede2;
  --brown-100: #ecdcc8;
  --brown-200: #dcc0a0;
  --brown-300: #c79a6e;
  --brown-400: #a36b44;
  --brown-500: #8a5a3b;
  --brown-600: #6b4429;
  --brown-700: #4a2e1c;   /* warm near-black earth */
  --brown-800: #362013;
  --brown-900: #241408;

  /* ---- Denim blue (badge sky, water & cold places) ---- */
  --denim-50:  #f0f6fa;
  --denim-100: #e0edf4;
  --denim-200: #d3e3ef;
  --denim-300: #b3cde0;
  --denim-400: #9cbcd6;
  --denim-500: #7aa7c9;   /* badge sky           */
  --denim-600: #5a86a8;
  --denim-700: #456d8b;
  --denim-800: #33526a;
  --denim-900: #223849;

  /* ---- Forest green (fresh, woodland settings) ---- */
  --green-50:  #f2f5ea;
  --green-100: #e5ecd4;
  --green-200: #cdd9b0;
  --green-300: #aec18a;
  --green-400: #8aa86b;
  --green-500: #6b8f4e;
  --green-600: #547038;
  --green-700: #3f5629;
  --green-800: #2d3d1d;
  --green-900: #1c2711;

  /* ============================================================
     SEMANTIC ALIASES — reference the ramps above, never raw hex
     ============================================================ */

  /* ---- Surfaces ---- */
  --surface-page:   var(--paper-100);
  --surface-card:   var(--paper-50);
  --surface-raised: #fffaf0;
  --surface-well:   var(--paper-200);
  --surface-sunk:   var(--paper-300);
  --surface-blue:   var(--denim-400);
  --surface-honey:  var(--honey-100);
  --surface-ink:    var(--brown-700);

  /* ---- Text ---- */
  --text-strong:   var(--ink-800);
  --text-body:     var(--ink-700);
  --text-muted:    var(--ink-400);
  --text-subtle:   var(--ink-300);
  --text-on-color: #fdf3e2;   /* cream text on red/brown/blue */
  --text-link:     var(--red-500);
  --text-link-hover: var(--red-600);

  /* ---- Brand accents (each with hover + press) ---- */
  --accent-primary:         var(--red-500);
  --accent-primary-hover:   var(--red-600);
  --accent-primary-press:   var(--red-700);
  --accent-primary-subtle:  var(--red-50);

  --accent-secondary:       var(--honey-300);
  --accent-secondary-hover: var(--honey-400);
  --accent-secondary-press: var(--honey-500);
  --accent-secondary-subtle:var(--honey-50);

  --accent-tertiary:        var(--denim-500);
  --accent-tertiary-hover:  var(--denim-600);
  --accent-tertiary-press:  var(--denim-700);
  --accent-tertiary-subtle: var(--denim-50);

  --accent-leaf:            var(--green-500);
  --accent-leaf-hover:      var(--green-600);
  --accent-leaf-press:      var(--green-700);
  --accent-leaf-subtle:     var(--green-50);

  /* ---- Borders ---- */
  --border-soft:   #e7d4b5;
  --border-ink:    #cdb288;
  --border-strong: var(--brown-400);
  --border-focus:  var(--denim-500);

  /* ---- Status (warm & gentle — surface tint + solid + readable text) ---- */
  --status-success:      var(--green-500);
  --status-success-bg:   var(--green-100);
  --status-success-text: var(--green-800);

  --status-warning:      var(--honey-400);
  --status-warning-bg:   var(--honey-100);
  --status-warning-text: var(--honey-900);

  --status-danger:       var(--red-500);
  --status-danger-bg:    var(--red-100);
  --status-danger-text:  var(--red-800);

  --status-info:         var(--denim-500);
  --status-info-bg:      var(--denim-100);
  --status-info-text:    var(--denim-900);

  /* ---- Focus ring ---- */
  --focus-ring: var(--denim-500);
}


/* ===== tokens/typography.css ===== */
/* Brave Ben's Big Adventures — Typography tokens
   Friendly, rounded, hand-lettered feeling. Baloo 2 carries the storybook
   warmth in titles & headings; Nunito keeps body text soft but readable. */

:root {
  /* Families */
  --font-display: 'Baloo 2', 'Trebuchet MS', system-ui, sans-serif;
  --font-body:    'Nunito', 'Andika', 'Segoe UI', system-ui, sans-serif;
  --font-hand:    'Gochi Hand', 'Comic Sans MS', cursive;

  /* Weights */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-bold:    700;
  --weight-black:   800;

  /* Type scale (rem; 1rem = 16px) */
  --text-2xs: 0.75rem;   /* 12px */
  --text-xs:  0.8125rem; /* 13px */
  --text-sm:  0.9375rem; /* 15px */
  --text-md:  1rem;      /* 16px */
  --text-lg:  1.1875rem; /* 19px */
  --text-xl:  1.5rem;    /* 24px */
  --text-2xl: 2rem;      /* 32px */
  --text-3xl: 2.75rem;   /* 44px */
  --text-4xl: 3.75rem;   /* 60px */
  --text-5xl: 5rem;      /* 80px — book-cover titles */

  /* Line heights */
  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.7;

  /* Letter spacing */
  --tracking-tight:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;   /* small caps / labels */
}


/* ===== tokens/spacing.css ===== */
/* Brave Ben's Big Adventures — Spacing & layout tokens
   Generous, cosy spacing on an 8px base — picture books like room to breathe. */

:root {
  --space-0:  0;
  --space-1:  0.25rem;  /* 4  */
  --space-2:  0.5rem;   /* 8  */
  --space-3:  0.75rem;  /* 12 */
  --space-4:  1rem;     /* 16 */
  --space-5:  1.5rem;   /* 24 */
  --space-6:  2rem;     /* 32 */
  --space-7:  3rem;     /* 48 */
  --space-8:  4rem;     /* 64 */
  --space-9:  6rem;     /* 96 */

  /* Layout */
  --container-sm: 40rem;
  --container-md: 60rem;
  --container-lg: 75rem;
  --gutter:       var(--space-5);
}


/* ===== tokens/effects.css ===== */
/* Brave Ben's Big Adventures — Effects: radii, shadows, borders, motion
   Soft rounded corners, warm low shadows (no cold grey), gentle easing. */

:root {
  /* Corner radii — everything is softly rounded, nothing sharp */
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   22px;
  --radius-xl:   32px;
  --radius-pill: 999px;

  /* Shadows — warm brown-tinted, soft & low. Never grey/black. */
  --shadow-sm:  0 1px 2px rgba(74, 46, 28, 0.10);
  --shadow-md:  0 4px 12px rgba(74, 46, 28, 0.12);
  --shadow-lg:  0 10px 28px rgba(74, 46, 28, 0.16);
  --shadow-inset: inset 0 2px 4px rgba(74, 46, 28, 0.08);

  /* Borders */
  --border-width: 1.5px;
  --border-card:  var(--border-width) solid var(--border-soft);

  /* Motion — gentle, never snappy. A soft settle, a tiny bounce. */
  --ease-soft:   cubic-bezier(0.22, 0.61, 0.36, 1);  /* @kind other */
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);  /* @kind other */
  --dur-fast:   140ms;  /* @kind other */
  --dur-base:   220ms;  /* @kind other */
  --dur-slow:   360ms;  /* @kind other */

  /* Paper grain — subtle warm texture overlay (used via background) */
  --paper-grain: radial-gradient(rgba(138, 90, 59, 0.035) 1px, transparent 1px);  /* @kind other */
}