/* =========================================================
   tokens.css — the ONLY place raw values live.
   Change a value here and the whole header + hero follows.
   styles.css contains no hex colors, px font sizes or shadows.
   ========================================================= */

:root {
  /* ---------- 1. Brand palette (edit these first) ---------- */
  --color-primary: #1b2470;
  /* navy: arch, headings, outlines, Register button */
  --color-on-primary: #ffffff;
  /* text/icons placed on primary */
  --color-accent: #c8202f;
  /* red: main CTA, highlights, small icons */
  --color-on-accent: #ffffff;
  /* text/icons placed on accent */

  /* ---------- 2. Surfaces & text ---------- */
  --color-bg: #fff7ec;
  /* page / hero background */
  --color-surface: #ffffff;
  /* cards, inputs, dropdowns, chips */
  --color-text: #141b4d;
  /* main text */
  --color-text-muted: #3a4170;
  /* sub-text, helper text */
  --color-border: #e7d9c4;
  /* soft borders (eyebrow badge, menu) */
  --color-divider: #d5d8ee;
  /* thin separators inside controls */
  --color-focus: var(--color-accent);
  --color-error: #b3261e;

  /* ---------- 3. Colors derived from the palette (no need to edit) ---------- */
  --color-accent-soft: color-mix(in srgb, var(--color-accent) 22%, transparent);
  --color-primary-soft: color-mix(in srgb,
      var(--color-primary) 10%,
      transparent);
  --color-deco-1: var(--color-primary);
  /* background icon color A */
  --color-deco-2: var(--color-accent);
  /* background icon color B */
  --opacity-deco: 0.45;
  /* outline icons around the character */

  /* ---------- 4. Backgrounds ---------- */
  --bg-page: var(--color-bg);
  --bg-header: var(--color-bg);
  --bg-hero: var(--color-bg);
  --bg-default: #ffff;
  /* can also be a gradient or url() */
  --bg-arch: var(--color-primary);
  --bg-menu: var(--color-surface);
  --bg-dots: radial-gradient(var(--color-primary) 2px, transparent 2.5px);
  --dots-size: 1rem;
  /* distance between dots */
  --dots-opacity: 0.5;

  /* ---------- 5. Typography ---------- */
  --font-display: "Baloo 2", "Noto Sans Devanagari", system-ui, sans-serif;
  --font-body: "Lexend", "Noto Sans Devanagari", system-ui, sans-serif;

  --fs-xs: 0.8125rem;
  /* 13px */
  --fs-sm: 0.875rem;
  /* 14px */
  --fs-base: 0.9375rem;
  /* 15px  nav links, helper text */
  --fs-md: 1.0625rem;
  /* 17px  inputs, buttons */
  --fs-lg: 1.25rem;
  /* 20px  hero sub-text */
  --fs-logo: 1.75rem;
  /* 28px */
  --fs-hero: clamp(2.5rem, 1.2rem + 4.6vw, 4.25rem);
  /* 40px -> 68px, fluid */

  --fw-regular: 400;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  --lh-tight: 1.02;
  --lh-snug: 1.25;
  --lh-base: 1.55;

  --ls-tight: -0.01em;
  --ls-caps: 0.04em;

  /* ---------- 6. Spacing scale (use these, not random px) ---------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* ---------- 7. Shape ---------- */
  --radius-sm: 0.5rem;
  --radius-md: 1rem;
  --radius-lg: 1.5rem;
  --radius-pill: 999px;
  --border-width: 1.5px;
  --border-width-strong: 2.5px;

  /* ---------- 8. Shadows (tinted by the text color so they follow the palette) ---------- */
  --shadow-sm: 0 0.5rem 1.25rem color-mix(in srgb, var(--color-text) 14%, transparent);
  --shadow-menu: 0 1rem 2.5rem color-mix(in srgb, var(--color-text) 18%, transparent);
  --shadow-input: 0 0.625rem 0 -0.125rem color-mix(in srgb, var(--color-primary) 12%, transparent);
  --shadow-ground: color-mix(in srgb,
      var(--color-text) 14%,
      transparent);
  /* shadow under her feet */

  /* ---------- 9. Layout & sizes ---------- */
  --container-max: 80rem;
  /* 1280px */
  --container-pad: clamp(1rem, 4vw, 2.5rem);
  --header-h: 4.75rem;
  --hero-min-h: 36rem;
  --hero-art-max: 35rem;
  /* max width of the character area */
  --control-h: 3.5rem;
  /* hero input + CTA height */
  --control-h-sm: 2.5rem;
  /* header buttons */
  --form-max: 34rem;
  --copy-max: 31rem;
  --icon-sm: 1.125rem;
  --icon-md: 1.25rem;
  --icon-stroke: 1.75;
  --z-header: 50;
  --z-dropdown: 60;

  /* ---------- 10. Motion ---------- */
  --float-distance: 0.5rem;
  --float-duration: 5s;
  --float-duration-alt: 6.5s;
  --transition: 150ms ease;
  --anim-duration: 650ms;
  --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.25, 0.64, 1);

  /* ---------- 11. Bento Card Tints ---------- */
  --color-surface-peach: color-mix(in srgb, #ff8a4c 11%, var(--color-surface));
  --color-surface-mint: color-mix(in srgb, #1b2470 5%, var(--color-surface));
  --color-badge-bg: color-mix(in srgb, var(--color-accent) 12%, var(--color-surface));
}

/* =========================================================
   Bootstrap bridge — maps the tokens above onto Bootstrap 5.3's own
   variables so its navbar, dropdown, forms and buttons follow your palette.
   You normally never edit this block. (Load order: bootstrap.css, tokens.css,
   styles.css.)
   Note: Bootstrap's spacing utilities (p-3, mt-4 ...) use fixed rem values,
   so this project spaces things with --space-* in styles.css instead and uses
   Bootstrap for grid, navbar, dropdown, buttons and form controls.
   ========================================================= */
:root {
  --bs-body-font-family: var(--font-body);
  --bs-body-font-size: var(--fs-base);
  --bs-body-font-weight: var(--fw-regular);
  --bs-body-line-height: var(--lh-base);
  --bs-body-color: var(--color-text);
  --bs-body-bg: var(--bg-page);
  --bs-link-color: var(--color-primary);
  --bs-link-hover-color: var(--color-accent);
  --bs-border-color: var(--color-border);
  --bs-border-width: var(--border-width);
  --bs-border-radius: var(--radius-sm);
  --bs-border-radius-lg: var(--radius-lg);
  --bs-border-radius-pill: var(--radius-pill);
  --bs-primary: var(--color-primary);
  --bs-danger: var(--color-error);
}

/* ---------------------------------------------------------
   Example: a second palette. Add data-theme="midnight" to <html>
   and uncomment to try a dark theme. Only tokens change.

[data-theme="midnight"] {
  --color-primary: #ffc83d;
  --color-on-primary: #111850;
  --color-accent: #ffc83d;
  --color-on-accent: #111850;
  --color-bg: #111850;
  --color-text: #ffffff;
  --color-text-muted: #c9cdee;
  --color-border: #2a3380;
  --color-deco-1: #ffffff;
}
--------------------------------------------------------- */