/* ============================================================
   ZhuZhu Design System — Colors & Typography
   colors_and_type.css
   ============================================================ */

/* ------------------------------------------------------------
   1. BASE COLOR TOKENS
   ------------------------------------------------------------ */
:root {
  /* Core palette */
  --color-cream:   #F5F5F0;
  --color-coral:   #E8503A;
  --color-black:   #000000;
  --color-white:   #FFFFFF;

  /* Extended palette — editorial section accents */
  --color-mint:        #A8E6CF;   /* mint/teal green — alternating section bg */
  --color-mint-dark:   #5EBD97;   /* darker mint for text/borders on mint bg */
  --color-mint-soft:   #C8F0DF;   /* soft mint — blob bg */
  --color-yellow:      #FFE066;   /* warm yellow — highlight accent */
  --color-yellow-soft: #FFF0A0;   /* soft yellow — blob bg */
  --color-yellow-dark: #D4A800;   /* darker yellow for borders on yellow bg */
  --color-blush:       #FFD6CC;   /* light coral blush — blob bg / soft accent */
  --color-lavender:    #E8D8F0;   /* soft lavender — blob bg */
  --color-sky:         #D4EEF7;   /* soft sky blue — blob bg */

  /* Illustration accents (SVG fill colors) */
  --color-coral-illustration: #ff6161;
  --color-mint-illustration:  #A8E6CF;
  --color-yellow-illustration:#FFE066;

  /* Semantic colors */
  --color-bg:           var(--color-cream);
  --color-bg-card:      var(--color-white);
  --color-fg:           var(--color-black);
  --color-fg-muted:     #333333;
  --color-accent:       var(--color-coral);
  --color-accent-hover: #C93F2C;
  --color-border:       var(--color-black);
  --color-border-muted: #555555;

  /* Section background tokens */
  --section-bg-1: var(--color-cream);
  --section-bg-2: var(--color-mint);
  --section-bg-3: var(--color-yellow);
  --section-bg-4: var(--color-white);
}

/* ------------------------------------------------------------
   2. TYPOGRAPHY TOKENS
   ------------------------------------------------------------ */
:root {
  /* Font families
     Primary: Space Grotesk (Google Fonts substitute — user may supply custom files)
     Fallback stack: tight grotesque sans-serifs */
  --font-display: 'Space Grotesk', 'DM Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'DM Sans', 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'IBM Plex Mono', 'Courier New', monospace;

  /* Font weights */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extrabold:800;

  /* Type scale (editorial — large and commanding) */
  --fs-xs:   0.75rem;   /* 12px */
  --fs-sm:   0.875rem;  /* 14px */
  --fs-base: 1rem;      /* 16px */
  --fs-md:   1.125rem;  /* 18px */
  --fs-lg:   1.25rem;   /* 20px */
  --fs-xl:   1.5rem;    /* 24px */
  --fs-2xl:  2rem;      /* 32px */
  --fs-3xl:  2.5rem;    /* 40px */
  --fs-4xl:  3.5rem;    /* 56px */
  --fs-5xl:  5rem;      /* 80px */
  --fs-hero: 7rem;      /* 112px — editorial hero */

  /* Line heights */
  --lh-tight:  1.1;
  --lh-snug:   1.25;
  --lh-normal: 1.5;
  --lh-loose:  1.75;

  /* Letter spacing */
  --ls-tight:  -0.03em;
  --ls-normal: 0;
  --ls-wide:   0.06em;
  --ls-wider:  0.12em;
  --ls-caps:   0.15em;
}

/* ------------------------------------------------------------
   3. SEMANTIC TYPE STYLES (element-level)
   ------------------------------------------------------------ */
:root {
  /* Display / Hero */
  --h-hero-font:    var(--font-display);
  --h-hero-size:    var(--fs-hero);
  --h-hero-weight:  var(--fw-extrabold);
  --h-hero-lh:      var(--lh-tight);
  --h-hero-ls:      var(--ls-tight);

  /* H1 */
  --h1-font:        var(--font-display);
  --h1-size:        var(--fs-4xl);
  --h1-weight:      var(--fw-bold);
  --h1-lh:          var(--lh-tight);
  --h1-ls:          var(--ls-tight);

  /* H2 */
  --h2-font:        var(--font-display);
  --h2-size:        var(--fs-3xl);
  --h2-weight:      var(--fw-bold);
  --h2-lh:          var(--lh-snug);
  --h2-ls:          var(--ls-tight);

  /* H3 */
  --h3-font:        var(--font-display);
  --h3-size:        var(--fs-2xl);
  --h3-weight:      var(--fw-semibold);
  --h3-lh:          var(--lh-snug);
  --h3-ls:          0;

  /* H4 */
  --h4-font:        var(--font-display);
  --h4-size:        var(--fs-xl);
  --h4-weight:      var(--fw-semibold);
  --h4-lh:          var(--lh-snug);
  --h4-ls:          0;

  /* Body / paragraph */
  --p-font:         var(--font-body);
  --p-size:         var(--fs-base);
  --p-weight:       var(--fw-regular);
  --p-lh:           var(--lh-normal);
  --p-ls:           0;

  /* Body large */
  --p-lg-size:      var(--fs-md);
  --p-lg-lh:        var(--lh-loose);

  /* Label / caption */
  --label-font:     var(--font-body);
  --label-size:     var(--fs-sm);
  --label-weight:   var(--fw-medium);
  --label-ls:       var(--ls-wide);
  --label-transform: uppercase;

  /* Code / mono */
  --code-font:      var(--font-mono);
  --code-size:      var(--fs-sm);
  --code-weight:    var(--fw-regular);
}

/* ------------------------------------------------------------
   4. SPACING TOKENS
   ------------------------------------------------------------ */
:root {
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-6:  24px;
  --space-8:  32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --space-32: 128px;
  --space-48: 192px;
}

/* ------------------------------------------------------------
   5. BORDER & RADIUS TOKENS
   ------------------------------------------------------------ */
:root {
  --border-width:    2px;
  --border-style:    solid;
  --border:          var(--border-width) var(--border-style) var(--color-black);

  --radius-none:     0px;
  --radius-sm:       2px;
  --radius-md:       4px;
  --radius-btn:      6px;
  --radius-lg:       8px;
  /* No pill/full-rounded shapes in this system */
}

/* ------------------------------------------------------------
   6. ELEVATION / SHADOW TOKENS
   ------------------------------------------------------------ */
:root {
  /* No shadows in this design system.
     Cards use borders, not elevation. */
  --shadow-none: none;
}

/* ------------------------------------------------------------
   7. GOOGLE FONTS IMPORT (substitutions — see README)
   ------------------------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700;800&family=DM+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');