/* ============================================================
   HUGO Design System — tokens
   Mirrored from the Claude Design project
   hugo-design-system-472686d4-ac90-49a1-9110-2d44ab6e7004
   (tokens/fonts · colors · typography · spacing · effects)

   Canon: the DESCRIPTIVE words are authoritative; hex is the
   working reference. Colour law — sunny lemon-yellow always pops
   AGAINST the blue lagoon / deep sea. Blue + yellow, adjacent and
   high-contrast, is the show's ownable signature.
   ============================================================ */

@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;1,600&display=swap");

:root {
  /* ---- Canon signature palette ---- */
  --lizard-blue:      #2E7DD1;
  --lizard-blue-deep: #1B4FA0;
  --lemon:            #F5D02F;
  --lagoon:           #17C3B2;
  --sea:              #0B4F8A;
  --rock:             #E7DBC3;
  --cream:            #F7F1E1;

  /* ---- Extended ramps ---- */
  --blue-50:   #EAF3FB;
  --blue-100:  #C9E1F5;
  --blue-300:  #7FB2E4;
  --blue-500:  var(--lizard-blue);
  --blue-700:  var(--lizard-blue-deep);
  --blue-900:  var(--sea);

  --lemon-100: #FCF1C0;
  --lemon-300: #F8E07A;
  --lemon-500: var(--lemon);
  --lemon-700: #C9A413;

  --lagoon-100:#C7F0EB;
  --lagoon-500:var(--lagoon);
  --lagoon-700:#0E8E81;

  --rock-100:  #F3ECDC;
  --rock-300:  var(--rock);
  --rock-500:  #CBBB98;
  --rock-700:  #8C7C58;

  /* ---- Ink (warm coastal navy — never cool grey) ---- */
  --ink-900:   #10283F;
  --ink-800:   #16324F;
  --ink-600:   #3A536C;
  --ink-400:   #6B7C8C;
  --white:     #FFFFFF;

  /* ---- Semantic ---- */
  --text-strong:  var(--ink-900);
  --text-body:    var(--ink-800);
  --text-muted:   var(--ink-600);
  --text-faint:   var(--ink-400);
  --text-on-blue: #FFFFFF;
  --text-on-lemon:var(--sea);
  --text-on-dark: var(--cream);

  --surface-page:  var(--cream);
  --surface-card:  var(--white);
  --surface-sunk:  var(--rock-100);
  --surface-stone: var(--rock);
  --surface-sea:   var(--sea);
  --surface-blue:  var(--lizard-blue);
  --surface-lagoon:var(--lagoon);

  --border-soft:   #E3D8BF;
  --border-strong: var(--ink-900);
  --border-hair:   rgba(16,40,63,0.10);

  --accent:        var(--lizard-blue);
  --accent-hover:  var(--lizard-blue-deep);
  --accent-lemon:  var(--lemon);
  --accent-lagoon: var(--lagoon);

  --grad-sea:    linear-gradient(135deg, var(--sea), var(--lizard-blue));
  --grad-grotto: linear-gradient(180deg, var(--lizard-blue) 0%, var(--sea) 45%, var(--lagoon) 100%);

  --success: var(--lagoon-700);
  --warning: var(--lemon-700);
  --danger:  #C0472B;
  --info:    var(--sea);
  --ring: 0 0 0 4px rgba(46,125,209,0.35);

  /* ---- Typography ---- */
  --font-display: "Baloo 2", ui-rounded, "Segoe UI", system-ui, sans-serif;
  --font-body:    "Nunito", ui-rounded, "Segoe UI", system-ui, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --text-xs:   0.8125rem;
  --text-sm:   0.9375rem;
  --text-base: 1.0625rem;
  --text-lg:   1.25rem;
  --text-xl:   1.5rem;
  --text-2xl:  1.875rem;
  --text-3xl:  2.375rem;
  --text-4xl:  3rem;
  --text-5xl:  4rem;
  --text-6xl:  5.25rem;
  --text-7xl:  7rem;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;
  --fw-black:   800;

  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.55;
  --lh-relaxed: 1.7;

  --ls-tight:  -0.02em;
  --ls-normal: 0;
  --ls-wide:   0.02em;
  --ls-caps:   0.14em;

  /* ---- Spacing (4px rhythm) ---- */
  --space-0:  0;
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  2.5rem;
  --space-8:  3rem;
  --space-10: 4rem;
  --space-12: 5rem;
  --space-16: 7rem;

  --container:        1120px;
  --container-narrow: 760px;
  --page-margin:      var(--space-8);

  /* ---- Effects ---- */
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   22px;
  --radius-xl:   32px;
  --radius-2xl:  44px;
  --radius-pill: 999px;

  --stroke:      2.5px solid var(--border-strong);
  --stroke-thin: 1.5px solid var(--border-soft);

  --shadow-sm:  0 2px 6px rgba(41,28,17,0.10);
  --shadow-md:  0 8px 20px rgba(41,28,17,0.12);
  --shadow-lg:  0 20px 44px rgba(41,28,17,0.16);
  --shadow-xl:  0 34px 70px rgba(41,28,17,0.20);

  --shadow-clay: 0 1px 0 rgba(255,255,255,0.55) inset, 0 10px 22px rgba(41,28,17,0.16);
  --shadow-press: 0 2px 6px rgba(41,28,17,0.18) inset;

  --ease-soft: cubic-bezier(0.34, 1.2, 0.4, 1);
  --ease-out:  cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast:  120ms;
  --dur-base:  200ms;
  --dur-slow:  360ms;
}