/* ==========================================================================
   AI Bolit Kids — Design Tokens
   Copy of `AI Bolit Kids Design System/colors_and_type.css`. Kept in
   web/public/assets so it's served as a static stylesheet and loaded
   from web/app/app.vue via <link rel="stylesheet">.

   Differences from the design-system source:
   - @font-face src uses absolute /assets/fonts/... path so Nuxt resolves
     the asset regardless of route.
   - Onest is still loaded via Google Fonts (see app.vue <link>).
     CSP in web/server/middleware/security.ts allows fonts.googleapis.com
     and fonts.gstatic.com for this reason.
   ========================================================================== */

@font-face {
  font-family: 'Caveat';
  src: url('/assets/fonts/Caveat-VariableFont_wght.ttf') format('truetype-variations'),
       url('/assets/fonts/Caveat-VariableFont_wght.ttf') format('truetype');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ============ COLOR: Beige neutrals (warm, paper-like) ================= */
  --beige-50:  #FDF9F0;
  --beige-100: #F9F3E4;
  --beige-200: #F2EBDA;
  --beige-300: #E8DFCA;
  --beige-400: #D6C9AB;
  --beige-500: #B8A780;
  --beige-600: #8A7B5A;

  /* ============ COLOR: Sage green (primary brand) ======================== */
  --sage-50:   #EFF4EE;
  --sage-100:  #DCE8DA;
  --sage-200:  #BFD3BC;
  --sage-300:  #9EBC9B;
  --sage-400:  #7BA889;
  --sage-500:  #5E8E6E;
  --sage-600:  #4A7558;
  --sage-700:  #365742;
  --sage-800:  #243B2D;

  /* ============ COLOR: Ink (text) ======================================== */
  --ink-900:   #2A2620;
  --ink-700:   #4A4335;
  --ink-500:   #7A6F5C;
  --ink-400:   #9E9480;
  --ink-300:   #C4BBA6;

  /* ============ COLOR: Semantic =========================================== */
  --info:          #6B93B5;
  --info-bg:       #E7EEF4;
  --success:       #5E8E6E;
  --success-bg:    #DCE8DA;
  --warning:       #C89A5B;
  --warning-bg:    #F5E9D3;
  --danger:        #B86A62;
  --danger-bg:     #F3DFDC;

  /* ============ COLOR: Accent ============================================= */
  --accent-peach:  #F0C9A8;
  --accent-rose:   #E8B8B0;
  --accent-butter: #F5D98E;
  --accent-sky:    #B8D0D8;
  --accent-lilac:  #C7BCD4;

  /* ============ SEMANTIC aliases ========================================= */
  --bg:              var(--beige-50);
  --bg-elevated:     #FFFFFF;
  --bg-subtle:       var(--beige-100);
  --bg-muted:        var(--beige-200);
  --surface:         #FFFFFF;
  --surface-warm:    var(--beige-100);

  --fg:              var(--ink-900);
  --fg-muted:        var(--ink-700);
  --fg-subtle:       var(--ink-500);
  --fg-disabled:     var(--ink-300);
  --fg-on-primary:   var(--beige-50);
  --fg-inverse:      var(--beige-50);

  --border:          var(--beige-300);
  --border-strong:   var(--beige-400);
  --border-focus:    var(--sage-500);

  --brand:           var(--sage-500);
  --brand-hover:     var(--sage-600);
  --brand-soft:      var(--sage-100);
  --brand-ink:       var(--sage-700);

  /* ============ TYPE: Families =========================================== */
  --font-sans:    'Onest', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-display: 'Onest', system-ui, sans-serif;
  --font-accent:  'Caveat', 'Onest', cursive;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, monospace;

  /* ============ TYPE: Scale ============================================== */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  30px;
  --text-3xl:  38px;
  --text-4xl:  48px;
  --text-5xl:  64px;
  --text-6xl:  80px;

  /* ============ TYPE: Line heights ====================================== */
  --lh-tight:   1.15;
  --lh-snug:    1.3;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

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

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

  /* ============ RADIUS =================================================== */
  --radius-xs:   6px;
  --radius-sm:   10px;
  --radius-md:   14px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-2xl:  36px;
  --radius-pill: 999px;

  /* ============ SHADOWS ================================================== */
  --shadow-xs:  0 1px 2px rgba(58, 44, 22, 0.04);
  --shadow-sm:  0 2px 6px rgba(58, 44, 22, 0.05), 0 1px 2px rgba(58, 44, 22, 0.04);
  --shadow-md:  0 6px 16px rgba(58, 44, 22, 0.07), 0 2px 4px rgba(58, 44, 22, 0.04);
  --shadow-lg:  0 14px 32px rgba(58, 44, 22, 0.09), 0 4px 8px rgba(58, 44, 22, 0.05);
  --shadow-xl:  0 24px 56px rgba(58, 44, 22, 0.12), 0 8px 16px rgba(58, 44, 22, 0.06);
  --shadow-inset: inset 0 1px 2px rgba(58, 44, 22, 0.06);
  --ring-focus: 0 0 0 3px rgba(94, 142, 110, 0.25);

  /* ============ MOTION =================================================== */
  --ease-out:   cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-soft:  cubic-bezier(0.4, 0, 0.2, 1);
  --ease-back:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   320ms;

  /* ============ LAYOUT =================================================== */
  --max-w-prose:  640px;
  --max-w-page:   1200px;
  --sidebar-w:    260px;
}

/* ==========================================================================
   Base element styles — semantic. Drop these on any page.
   ========================================================================== */

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--text-5xl);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  color: var(--sage-700);
  margin: 0 0 var(--space-4);
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--text-3xl);
  line-height: var(--lh-snug);
  letter-spacing: -0.015em;
  color: var(--sage-700);
  margin: 0 0 var(--space-3);
}

h3, .h3 {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--text-xl);
  line-height: var(--lh-snug);
  letter-spacing: -0.005em;
  color: var(--ink-900);
  margin: 0 0 var(--space-2);
}

h4, .h4 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--text-md);
  line-height: var(--lh-snug);
  color: var(--ink-900);
  margin: 0 0 var(--space-2);
}

.eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sage-600);
}

p {
  color: var(--fg);
  line-height: var(--lh-relaxed);
  text-wrap: pretty;
  margin: 0 0 var(--space-4);
}

.lead {
  font-size: var(--text-md);
  color: var(--fg-muted);
  line-height: var(--lh-relaxed);
}

small, .small {
  font-size: var(--text-sm);
  color: var(--fg-subtle);
}

a {
  color: var(--sage-600);
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}
a:hover { color: var(--sage-700); }

code, kbd {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--beige-200);
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  color: var(--ink-900);
}

* { box-sizing: border-box; }
button { font-family: inherit; cursor: pointer; }