/*
 * Design Tokens — CSS Custom Properties
 *
 * All colour, typography, spacing, shadow, and motion values
 * are defined here. Import this file before everything else.
 *
 * Tekvera Initiative Theme
 */

:root {
  /* ── Colour Palette ────────────────────────────────────────────────────── */

  /* Forest green (primary brand) */
  --tv-green-950: #0a2b1a;
  --tv-green-900: #0f3622;
  --tv-green-800: #094127;
  --tv-green-700: #155740;
  --tv-green-600: #1e7254;
  --tv-green-500: #279068;
  --tv-green-400: #39ad82;
  --tv-green-300: #70c8a4;
  --tv-green-200: #a8dfc6;
  --tv-green-100: #d0f0e2;
  --tv-green-50: #ebf7f1;

  /* Amber / gold (accent) */
  --tv-amber-700: #6b4400;
  --tv-amber-600: #9a6200;
  --tv-amber-500: #c07c00;
  --tv-amber-400: #f0a500;
  --tv-amber-300: #f5bc38;
  --tv-amber-200: #fad880;
  --tv-amber-100: #fdefc0;
  --tv-amber-50: #fef9e8;

  /* Neutral cream (background) */
  --tv-cream: #f7f5ee;
  --tv-cream-dark: #ede9dc;
  --tv-cream-mid: #e5e0cf;

  /* White */
  --tv-white: #ffffff;

  /* Text / foreground */
  --tv-text-primary: #0d1b14;
  --tv-text-secondary: #3a5447;
  --tv-text-tertiary: #6a8c7c;
  --tv-text-muted: #9bb0a8;
  --tv-text-disabled: #b8cec5;

  /* Borders */
  --tv-border: #d2e3da;
  --tv-border-dark: #b8cec5;
  --tv-border-deep: #8aada3;

  /* ── Semantic colour aliases ────────────────────────────────────────────── */
  --tv-bg-page: var(--tv-cream);
  --tv-bg-surface: var(--tv-white);
  --tv-bg-subtle: var(--tv-green-50);
  --tv-bg-dark: var(--tv-green-900);
  --tv-bg-darkest: var(--tv-green-950);
  --tv-accent: var(--tv-amber-400);
  --tv-accent-dark: var(--tv-amber-600);
  --tv-primary: var(--tv-green-800);
  --tv-primary-hover: var(--tv-green-700);

  /* ── Typography ──────────────────────────────────────────────────────────── */
  --tv-font-serif: "Fraunces", Georgia, "Times New Roman", serif;
  --tv-font-sans: "Outfit", "Segoe UI", system-ui, -apple-system, sans-serif;
  --tv-font-mono: "JetBrains Mono", "Fira Code", monospace;

  /* Type scale */
  --tv-text-xs: 0.72rem; /*  ~11px */
  --tv-text-sm: 0.85rem; /*  ~13px */
  --tv-text-base: 1rem; /*  ~15px */
  --tv-text-md: 1.05rem; /*   16px */
  --tv-text-lg: 1.125rem; /*  ~18px */
  --tv-text-xl: 1.25rem; /*   20px */
  --tv-text-2xl: 1.5rem; /*   24px */
  --tv-text-3xl: 1.875rem; /*   30px */
  --tv-text-4xl: 2.25rem; /*   36px */
  --tv-text-5xl: 3rem; /*   48px */
  --tv-text-6xl: 3.75rem; /*   60px */
  --tv-text-7xl: 4.5rem; /*   72px */

  /* Line heights */
  --tv-leading-tight: 1.08;
  --tv-leading-snug: 1.2;
  --tv-leading-normal: 1.5;
  --tv-leading-relaxed: 1.72;
  --tv-leading-loose: 1.85;

  /* Letter spacing */
  --tv-tracking-tight: -0.03em;
  --tv-tracking-normal: 0;
  --tv-tracking-wide: 0.04em;
  --tv-tracking-wider: 0.08em;
  --tv-tracking-widest: 0.14em;

  /* ── Spacing scale ───────────────────────────────────────────────────────── */
  --tv-sp-1: 0.25rem; /*  4px */
  --tv-sp-2: 0.5rem; /*  8px */
  --tv-sp-3: 0.75rem; /* 12px */
  --tv-sp-4: 1rem; /* 16px */
  --tv-sp-5: 1.25rem; /* 20px */
  --tv-sp-6: 1.5rem; /* 24px */
  --tv-sp-8: 2rem; /* 32px */
  --tv-sp-10: 2.5rem; /* 40px */
  --tv-sp-12: 3rem; /* 48px */
  --tv-sp-16: 4rem; /* 64px */
  --tv-sp-20: 5rem; /* 80px */
  --tv-sp-24: 6rem; /* 96px */
  --tv-sp-28: 7rem; /* 112px */
  --tv-sp-32: 8rem; /* 128px */

  /* Section vertical rhythm */
  --tv-section-pad-y: clamp(3rem, 8vw, 5.5rem);
  --tv-section-pad-y-sm: clamp(2.5rem, 5vw, 4rem);
  --tv-section-pad-y-lg: clamp(5rem, 10vw, 8rem);

  /* ── Layout ─────────────────────────────────────────────────────────────── */
  --tv-max-width: 1180px;
  --tv-max-width-sm: 760px;
  --tv-max-width-md: 960px;
  --tv-max-width-lg: 1380px;
  --tv-gutter: 1.5rem;
  --tv-gutter-sm: 1rem;
  --tv-gutter-lg: 2.5rem;
  --tv-nav-height: 68px;
  --tv-grid-gap: 1.25rem;
  --tv-grid-gap-lg: 2rem;

  /* ── Border radius ───────────────────────────────────────────────────────── */
  --tv-radius-sm: 6px;
  --tv-radius-md: 10px;
  --tv-radius-lg: 16px;
  --tv-radius-xl: 24px;
  --tv-radius-2xl: 32px;
  --tv-radius-full: 9999px;

  /* ── Shadows ─────────────────────────────────────────────────────────────── */
  --tv-shadow-xs: 0 1px 2px rgba(6, 28, 19, 0.05);
  --tv-shadow-sm:
    0 1px 3px rgba(6, 28, 19, 0.06), 0 1px 2px rgba(6, 28, 19, 0.04);
  --tv-shadow-md:
    0 4px 20px rgba(6, 28, 19, 0.09), 0 2px 8px rgba(6, 28, 19, 0.05);
  --tv-shadow-lg:
    0 12px 48px rgba(6, 28, 19, 0.13), 0 4px 16px rgba(6, 28, 19, 0.07);
  --tv-shadow-xl:
    0 24px 72px rgba(6, 28, 19, 0.18), 0 8px 24px rgba(6, 28, 19, 0.09);
  --tv-shadow-inner: inset 0 1px 4px rgba(6, 28, 19, 0.08);

  /* ── Motion / Transitions ───────────────────────────────────────────────── */
  --tv-ease-default: cubic-bezier(0.16, 1, 0.3, 1);
  --tv-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --tv-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --tv-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --tv-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --tv-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

  --tv-duration-fast: 150ms;
  --tv-duration-base: 250ms;
  --tv-duration-slow: 400ms;
  --tv-duration-slower: 650ms;
  --tv-duration-slowest: 900ms;

  --tv-transition: all var(--tv-duration-base) var(--tv-ease-default);
  --tv-transition-fast: all var(--tv-duration-fast) var(--tv-ease-default);
  --tv-transition-slow: all var(--tv-duration-slow) var(--tv-ease-default);

  /* ── Z-index scale ──────────────────────────────────────────────────────── */
  --tv-z-below: -1;
  --tv-z-base: 0;
  --tv-z-raised: 10;
  --tv-z-dropdown: 50;
  --tv-z-sticky: 100;
  --tv-z-overlay: 200;
  --tv-z-modal: 300;
  --tv-z-toast: 400;
}

/* ── Dark-section overrides ──────────────────────────────────────────────────
 * Applied to elements inside .tv-section--dark or .tv-bg-dark
 * so text automatically reads correctly.
 * ─────────────────────────────────────────────────────────────────────────── */
.tv-section--dark,
[data-bg="dark"] {
  --tv-text-primary: #ffffff;
  --tv-text-secondary: rgba(255, 255, 255, 0.72);
  --tv-text-tertiary: rgba(255, 255, 255, 0.46);
  --tv-text-muted: rgba(255, 255, 255, 0.28);
  --tv-border: rgba(255, 255, 255, 0.08);
  --tv-border-dark: rgba(255, 255, 255, 0.14);
}