/* ==========================================================================
   COCOON DESIGN TOKENS
   Colour, type, spacing, radii, shadow, motion
   ==========================================================================
   Use:    @import url("./colors_and_type.css");
   Fonts:  Bastia (brand display) + Inter — both self-hosted from /fonts. No third-party.
   ========================================================================== */

/* Inter — self-hosted variable (latin), covers 400–700. No render-block, no CDN. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('./fonts/inter/inter.woff2') format('woff2');
}

@font-face {
  font-family: 'Bastia';
  src: url('./fonts/Bastia-Bold.otf')  format('opentype'),
       url('./fonts/Bastia-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Bastia Outline';
  src: url('./fonts/Bastia-BoldOutline.ttf') format('truetype'),
       url('./fonts/Bastia-BoldOutline.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- BRAND COLOURS ---------- */
  --cocoon-yellow:       #FCD209;   /* Primary — wordmark, CTAs, accents */
  --cocoon-yellow-hover: #E8C008;   /* Hover on primary buttons */
  --cocoon-yellow-soft:  #FFE783;   /* Tonal yellow — for hero glow only */
  --cocoon-paper:        #F2EEE4;   /* Warm neutral — section wash (no yellow tint) */
  --cocoon-paper-2:      #ECE7D9;   /* Slightly deeper paper — for depth on paper */
  --cocoon-cream:        #F2EEE4;   /* Alias → paper, keeps legacy refs working */

  --cocoon-ink:          #1F2421;   /* Primary text, dark mark element */
  --cocoon-ink-2:        #2C332E;   /* Secondary dark — borders on dark, hover */
  --cocoon-graphite:     #4A524D;   /* Body secondary */
  --cocoon-mid:          #7A8079;   /* Tertiary text, placeholders */
  --cocoon-mist:         #C8C9C2;   /* Disabled, dividers */
  --cocoon-border:       #EAE7DC;   /* Default border, warm */
  --cocoon-surface:      #FFFFFF;   /* Card / surface */
  --cocoon-bg:           #FAFAF7;   /* Page background, warm off-white */

  /* ---------- SEMANTIC ---------- */
  --color-success:       #2E7D5B;
  --color-warning:       #C9851A;
  --color-error:         #B43A2E;
  --color-info:          #2F5A8A;

  /* ---------- FOREGROUND / BACKGROUND ROLES ---------- */
  --fg-1:                var(--cocoon-ink);        /* Primary text */
  --fg-2:                var(--cocoon-graphite);   /* Secondary text */
  --fg-3:                var(--cocoon-mid);        /* Tertiary / muted */
  --fg-on-yellow:        var(--cocoon-ink);
  --fg-on-dark:          #FAFAF7;

  --bg-1:                var(--cocoon-bg);         /* Page */
  --bg-2:                var(--cocoon-surface);    /* Card */
  --bg-3:                var(--cocoon-cream);      /* Wash */
  --bg-accent:           var(--cocoon-yellow);
  --bg-accent-soft:      var(--cocoon-yellow-soft);
  --bg-dark:             var(--cocoon-ink);

  --border:              var(--cocoon-border);
  --border-strong:       var(--cocoon-mist);

  /* ---------- TYPE FAMILIES ---------- */
  --font-serif: 'Bastia', 'DM Serif Display', 'Playfair Display', 'Times New Roman', serif;
  --font-display-outline: 'Bastia Outline', 'Bastia', 'DM Serif Display', serif;
  --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono:  ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ---------- TYPE SCALE (px-rooted, rem-scaled) ---------- */
  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-32: 2rem;
  --fs-40: 2.5rem;
  --fs-56: 3.5rem;
  --fs-72: 4.5rem;
  --fs-96: 6rem;

  /* ---------- LINE HEIGHTS ---------- */
  --lh-tight:  1.1;     /* Display serif */
  --lh-snug:   1.25;    /* Headings */
  --lh-normal: 1.5;     /* Body */
  --lh-loose:  1.7;     /* Long-form */

  /* ---------- 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;
  --sp-9:   96px;
  --sp-10:  128px;

  /* ---------- RADII ---------- */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-pill: 9999px;

  /* ---------- SHADOWS ---------- */
  --shadow-xs: 0 1px 2px rgba(31, 36, 33, 0.05);
  --shadow-sm: 0 1px 2px rgba(31, 36, 33, 0.04), 0 2px 6px rgba(31, 36, 33, 0.04);
  --shadow-md: 0 1px 2px rgba(31, 36, 33, 0.04), 0 8px 24px rgba(31, 36, 33, 0.06);
  --shadow-lg: 0 4px 12px rgba(31, 36, 33, 0.06), 0 24px 48px rgba(31, 36, 33, 0.08);
  --shadow-yellow: 0 8px 24px rgba(252, 210, 9, 0.35);

  /* ---------- MOTION ---------- */
  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    150ms;
  --dur-base:    200ms;
  --dur-slow:    400ms;
}

/* ==========================================================================
   SEMANTIC ELEMENT STYLES
   Drop-in defaults — opt out by using utility classes if you don't want them
   ========================================================================== */

html { font-size: 16px; }

body {
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  line-height: var(--lh-normal);
  color: var(--fg-1);
  background: var(--bg-1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Display serif — for hero headlines and brand moments */
.display-1, h1.display, .h-display {
  font-family: var(--font-serif);
  font-size: clamp(var(--fs-56), 7vw, var(--fs-96));
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  font-weight: 400;
  color: var(--fg-1);
}

/* Headings — sans by default; opt into serif with .h-serif */
h1, .h1 {
  font-family: var(--font-sans);
  font-size: var(--fs-40);
  line-height: var(--lh-snug);
  letter-spacing: -0.02em;
  font-weight: 600;
  margin: 0;
}
h2, .h2 {
  font-family: var(--font-sans);
  font-size: var(--fs-32);
  line-height: var(--lh-snug);
  letter-spacing: -0.015em;
  font-weight: 600;
  margin: 0;
}
h3, .h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
  font-weight: 600;
  margin: 0;
}
h4, .h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-20);
  line-height: var(--lh-snug);
  font-weight: 600;
  margin: 0;
}

/* Serif modifier for any heading */
.h-serif { font-family: var(--font-serif); font-weight: 400; letter-spacing: -0.005em; }

p, .body {
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  line-height: var(--lh-normal);
  color: var(--fg-1);
  margin: 0;
}

.body-lg { font-size: var(--fs-18); line-height: var(--lh-loose); }
.body-sm { font-size: var(--fs-14); line-height: var(--lh-normal); color: var(--fg-2); }
.caption { font-size: var(--fs-12); line-height: var(--lh-normal); color: var(--fg-3); letter-spacing: 0.02em; }

.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-12);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-2);
}

a { color: var(--fg-1); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--cocoon-ink-2); text-decoration-color: var(--cocoon-yellow); text-decoration-thickness: 2px; }

code, kbd, pre, samp { font-family: var(--font-mono); font-size: 0.95em; }

::selection { background: var(--cocoon-yellow); color: var(--cocoon-ink); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}