/* ==========================================================================
   tokens.css: design tokens (colours, fonts, sizes, spacing, radii)
   ----------------------------------------------------------------------------
   Loaded first on every page. Change a value here and it changes everywhere.
   The colours are the owner's palette (October 2026); see CLAUDE.md.
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------------
     Colours: foundations
     ------------------------------------------------------------------------ */
  --color-brand: #124235;        /* identity green: header, footer, links, dark bands */
  --color-ink: #16231F;          /* all headings and body text */
  --color-muted: #4A5752;        /* course codes, captions, level labels */
  --color-line: #C9D6D0;         /* borders, dividers */
  --color-surface: #FFFFFF;      /* page and card background */
  --color-surface-soft: #F3F6F4; /* alternate section background (not used for backgrounds: white only, owner's choice); menu-button hover */
  --color-on-dark: var(--color-surface);  /* text on dark fills */
  --color-mint: #ADC7BE;                  /* mint green: the swatch behind the three tokens that use it below */
  --color-on-dark-muted: var(--color-mint); /* labels and secondary text on brand green (6.3:1) */
  --color-line-on-dark: #3D6459;          /* dividers on brand green */
  --color-focus-ring: var(--color-brand); /* keyboard focus outline */

  /* ------------------------------------------------------------------------
     Colours: pillars ("How each day works" cards)
     ------------------------------------------------------------------------ */
  --color-pillar-academic: var(--color-brand); /* the brand green; white text (11.3:1) */
  --color-pillar-team: var(--color-mint);      /* mint green; ink text (9.0:1) */
  --color-pillar-professional: var(--color-level-tint); /* very light green, as the level switch; ink text (14.2:1) */
  --color-pillar-social: #F2E2AA;              /* ink text. Gold means the social programme only (the Social card and the day bar); not an accent elsewhere (owner, 21 October 2026) */

  /* ------------------------------------------------------------------------
     Colours: subjects (icons and card labels in "Choose your course"; pills in the home hero)
     ------------------------------------------------------------------------ */
  --color-subject-ai: #1D3645;           /* white text */
  --color-subject-data-science: #5D717F; /* white text */
  --color-subject-economics: #9FAFBB;    /* text #1D3645 */
  --color-subject-finance: #D4DEE6;      /* text #1D3645 */
  --color-subject-text: var(--color-subject-ai); /* text on the economics and finance labels */

  /* ------------------------------------------------------------------------
     Colours: course levels (labels and dots in "Choose your course")
     ------------------------------------------------------------------------ */
  --color-level: #446B5E;                  /* ●○ Foundations: outlined; ●● Advanced: filled, white text (5.98:1). Icon circles and numbered steps use --color-brand; the one other use is the second line of the teach__big statements (owner) */
  --color-level-tint: #EAF2EE;             /* very light green: the level switch band, the key-facts strip and other light-green panels */

  /* ------------------------------------------------------------------------
     Colours: actions
     ------------------------------------------------------------------------ */
  --color-link-underline: var(--color-mint);   /* underline of text links (brand green on hover) */
  --color-cta: #B5583B;                        /* primary button fill; secondary button outline and text */
  --color-button-hover: var(--color-brand);    /* hover of the green jump links (Courses and Faculty pages) */
  --color-cta-hover: #944830;                  /* primary hover; secondary hover text and border (a deeper CTA colour) */
  --color-cta-tint: #F8EEEB;                   /* secondary hover fill (a faint wash of the CTA colour) */

  /* Not part of the palette: soft shadows (header once scrolled, day cards on hover) */
  --color-shadow: #D4D4D4;
  --color-shadow-strong: rgba(0, 0, 0, 0.35);  /* the shadow under the WeChat pop-up */
  --color-backdrop: rgba(22, 35, 31, 0.55);     /* the dimmed page behind the WeChat pop-up (ink at 55%) */

  /* Not part of the palette: the student video tile ("What our students say") */
  --color-film-shade: rgba(22, 35, 31, 0.88);       /* shading at the bottom of the poster, behind the clip's title (ink at 88%) */
  --color-film-shade-soft: rgba(22, 35, 31, 0.35);  /* the same shading, fading out */
  --color-film-shade-clear: rgba(22, 35, 31, 0);    /* fully faded out */
  --color-play-button: rgba(255, 255, 255, 0.94);   /* the round play button on the poster */
  --color-film-edge: rgba(22, 35, 31, 0.12);        /* a faint line round the tile, so a pale sky keeps its edge */

  /* ------------------------------------------------------------------------
     Fonts: Playfair Display for headings, Inter for everything else
     ------------------------------------------------------------------------ */
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-heading: 'Playfair Display', Georgia, serif;
  /* Playfair only from --text-xl up (22px since the scale went down by 2px; was 24px); smaller titles use --font-body semi-bold, one size step down (quotes stay serif) */

  /* ------------------------------------------------------------------------
     Font sizes (every size 2px smaller than until 21 October 2026, with
     the 1200px content width; owner. Body text: 14px, set on body).
     Phones (767px and down) keep the earlier scale, 16px body text: see
     the end of this file
     ------------------------------------------------------------------------ */
  --text-xs: 10px;
  --text-sm: 12px;
  --text-base: 14px;
  --text-md: 16px;
  --text-lg: 18px;
  --text-xl: 22px;
  --text-2xl: 24px;
  --text-3xl: 26px;
  --text-4xl: 28px;
  --text-5xl: 32px;
  --text-6xl: 38px;
  --text-7xl: 46px;
  --text-subheading: var(--text-xl); /* subsection titles and large card titles: 22px */

  /* ------------------------------------------------------------------------
     Line heights
     ------------------------------------------------------------------------ */
  --leading-none: 1;
  --leading-snug: 1.2;
  --leading-heading: 1.5;
  --leading-body: 1.55;
  --leading-relaxed: 1.6;

  /* ------------------------------------------------------------------------
     Spacing (margins, padding, gaps)
     ------------------------------------------------------------------------ */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 80px;

  /* Section headings (owner's decision, 18 October 2026): title to intro
     line 16px; heading (the title, or the title and its intro) to the
     content below 32px, 24px on phones (see the end of this file). */
  --space-heading-lead: var(--space-4);
  --space-heading-content: var(--space-6);

  /* Spacing system (owner's decisions, 18 October 2026; docs/SPACING-AUDIT.md).
     The space between sections is the bands' padding (32px + 32px). Phone
     values are at the end of this file. */
  --space-card: var(--space-5);    /* inner padding of every card and panel: 24px (20px on phones) */
  --gap-card: var(--space-3);      /* between the parts inside a card or item, including a smaller heading and its text, and between bullet points: 12px */
  --gap-grid: var(--space-5);      /* between cards or photos in a grid: 24px (16px on phones) */
  --gap-columns: var(--space-8);   /* between a text column and a photo column side by side: 64px */
  --gap-stacked: var(--space-6);   /* the same two columns stacked (tablets and phones): 32px */

  /* ------------------------------------------------------------------------
     Corner radii
     ------------------------------------------------------------------------ */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-pill: 9999px;
  --radius-round: 50%;
  --radius-card: var(--radius-lg); /* every card, panel and photo: 8px */

  /* ------------------------------------------------------------------------
     Layout widths
     ------------------------------------------------------------------------ */
  --container-max: 1200px;           /* widest content area (was 1400px until 21 October 2026: narrower, with wider white margins on large screens; owner) */
  --header-height: 80px;             /* sticky header (64px from 991px down; see layout.css) */

  /* ------------------------------------------------------------------------
     Motion
     ------------------------------------------------------------------------ */
  --duration-fast: 120ms;
  --duration-base: 300ms;
  --duration-slow: 400ms;           /* the rows of the phone menu sliding in */
  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Phones: a little less space between a section heading and its content,
   and the earlier type scale (each size 2px larger than on wider screens):
   16px body text reads better on a phone, and most visitors use one */
@media (max-width: 767px) {
  :root {
    --text-xs: 12px;
    --text-sm: 14px;
    --text-base: 16px;
    --text-md: 18px;
    --text-lg: 20px;
    --text-xl: 24px;
    --text-2xl: 26px;
    --text-3xl: 28px;
    --text-4xl: 30px;
    --text-5xl: 34px;
    --text-6xl: 40px;
    --text-7xl: 48px;
    --space-heading-content: var(--space-5);
    --space-card: 20px;
    --gap-grid: var(--space-4);
  }
}