/*
 * SkilUpp design tokens.
 * Colours sampled from docs/references/homepage-reference.png; contrast ratios are in DESIGN_SYSTEM.md.
 * Breakpoints cannot be custom properties in media queries: sm 480, md 768, lg 1024, xl 1280.
 */
:root {
  /* Brand palette */
  --forest-950: #08211b;
  --forest-900: #0c2c22;
  --forest-800: #113728;
  --green-800: #0c6a1d;
  --green-700: #0f7a22;
  --green-600: #12812a;
  --green-500: #1f9a33;
  --green-400: #40a940;
  --green-200: #c8ebcd;
  --green-100: #e1f4e3;
  --green-50: #ebf7ed;
  --yellow-300: #fbd862;
  --yellow-400: #f8cc33;
  --yellow-500: #f4ba01;
  --star: #f5b400;

  --ink-900: #0b1a12;
  --ink-700: #334139;
  --ink-500: #56645c;
  --ink-300: #b9c6bd;
  --line: #dfe9e2;
  --line-strong: #c3d2c8;
  --white: #ffffff;

  /* Course category accents (icon tiles; icons are decorative) */
  --accent-green: #40a940;
  --accent-purple: #8441f2;
  --accent-orange: #f39c00;
  --accent-blue: #0a8df1;

  /* Semantic colours */
  --color-bg: #f6fbf5;
  --color-surface: var(--white);
  --color-surface-muted: var(--green-50);
  --color-surface-tint: var(--green-100);
  --color-heading: var(--ink-900);
  --color-text: var(--ink-700);
  --color-text-muted: var(--ink-500);
  --color-border: var(--line);
  --color-border-strong: var(--line-strong);
  --color-border-input: #869489; /* 3.2:1 on white: WCAG 1.4.11 non-text contrast for field boundaries */
  --color-primary: var(--green-600);
  --color-primary-hover: var(--green-700);
  --color-primary-active: var(--green-800);
  --color-on-primary: var(--white);
  --color-link: var(--green-700);
  --color-accent: var(--yellow-400);
  --color-dark: var(--forest-950);
  --color-dark-alt: var(--forest-800);
  --color-on-dark: var(--white);
  --color-on-dark-muted: rgba(255, 255, 255, 0.82);
  --color-focus: var(--green-600);
  --color-focus-on-dark: var(--yellow-400);

  --color-success: #0f6b1f;
  --color-success-bg: #e3f5e6;
  --color-success-border: #a9dcb2;
  --color-warning: #8a4b00;
  --color-warning-bg: #fff4dc;
  --color-warning-border: #f2cf86;
  --color-danger: #b3261e;
  --color-danger-bg: #fdecea;
  --color-danger-border: #f2b8b3;
  --color-info: #0b5cad;
  --color-info-bg: #e7f1fc;
  --color-info-border: #a9cbef;
  --color-neutral: #46524b;
  --color-neutral-bg: #eef2ef;

  --color-disabled-bg: #e9eeea;
  --color-disabled-text: #6f7c74;

  /* Typography: system stacks until brand fonts are approved (see DESIGN_SYSTEM.md §2) */
  --font-display: "Avenir Next", "Avenir", "Segoe UI", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-script: "Bradley Hand", "Segoe Print", "Chalkboard SE", "Marker Felt", cursive;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --fs-display: clamp(2.25rem, 1.35rem + 3.4vw, 3.75rem);
  --fs-h1: clamp(2rem, 1.55rem + 1.8vw, 2.75rem);
  --fs-h2: clamp(1.5rem, 1.25rem + 1vw, 2rem);
  --fs-h3: 1.25rem;
  --fs-h4: 1.0625rem;
  --fs-lead: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --fs-body: 1rem;
  --fs-sm: 0.875rem;
  --fs-xs: 0.8125rem;
  --fs-script: clamp(1.5rem, 1.2rem + 1vw, 2rem);

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

  --lh-tight: 1.1;
  --lh-snug: 1.3;
  --lh-body: 1.6;

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  /* Layout */
  --container-max: 1240px;
  --container-narrow: 760px;
  --gutter: 16px;
  --header-height: 64px;
  --section-pad: var(--space-7);

  /* Shape and elevation */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 999px;
  --border: 1px solid var(--color-border);
  --shadow-sm: 0 1px 2px rgba(16, 40, 24, 0.06);
  --shadow-md: 0 4px 16px rgba(16, 40, 24, 0.08);
  --shadow-lg: 0 12px 32px rgba(16, 40, 24, 0.14);
  --focus-ring: 0 0 0 3px rgba(18, 129, 42, 0.28);

  /* Motion */
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
  --dur-fast: 120ms;
  --dur: 200ms;

  --z-header: 50;
  --z-dropdown: 60;
  --z-modal: 100;
}

@media (min-width: 768px) {
  :root {
    --gutter: 24px;
    --header-height: 72px;
    --section-pad: var(--space-8);
  }
}

@media (min-width: 1280px) {
  :root {
    --gutter: 32px;
  }
}