/* ==========================================================================
   PMILC design tokens: the single source for colours, type, radii and
   shadows. Page stylesheets use var(--…) only; a brand change is made here.
   ========================================================================== */
:root {
  /* Brand */
  --purple: var(--ds-primary);
  --purple-deep: #32106d;
  --cyan: #05BFE0;
  --cyan-deep: #058A9E;
  --orange: #FF610F;
  --orange-deep: #B33D0C;   /* also: orange text on white / tints (the brand orange is too light for text) */

  /* Text */
  --ink: #201839;
  --muted: #655f75;
  --cyan-ink: #0a6a7c;      /* teal text / icons on white or --cyan-tint */
  --on-dark: #eee8ff;       /* body text on purple / dark surfaces */
  --on-dark-soft: #ddd2ef;  /* secondary text on dark: notes, footer links */

  /* Surfaces and lines */
  --volunteer-surface: #fff;
  --mist: #f7f5fb;
  --night: #221043;         /* darkest surface: footer, print bands, lightbox */
  --purple-tint: #eee7f8;   /* icon tiles, tags, soft purple panels */
  --cyan-tint: #dff8fd;     /* icon tiles, tags, "sent" status */
  --orange-tint: #fff0e7;   /* icon tiles, tags, "error" status */
  --line: #e5dff0;
  --line-strong: #cfc6df;   /* form field borders */

  /* Type scale (Inter, weights 400 / 600 / 700 / 800). */
  --text-2xs: .72rem;       /* date blocks, tiny badges */
  --text-xs: .78rem;        /* eyebrows, tags, labels */
  --text-sm: .85rem;        /* meta lines, captions, small UI */
  --text-md: .9rem;         /* secondary copy, notes, buttons in cards */
  --text-base: 1rem;        /* body copy */
  --text-lead: 1.1rem;      /* intro paragraphs, list headings */
  --text-lg: 1.2rem;        /* card titles (h3) */
  --text-xl: 1.45rem;       /* panel titles */
  --text-2xl: 1.7rem;       /* feature / block titles */
  --text-3xl: 2.1rem;       /* page titles on phones, large figures */
  --text-4xl: 2.9rem;       /* landing titles on phones */
  /* Fluid headings: one size per level across the site. */
  --text-display: clamp(2.8rem, 5vw, 4.8rem);    /* landing-page hero title (Home, About, Learning, Events…) */
  --text-h1: clamp(2.2rem, 3.4vw, 3.2rem);       /* page title in a half-height hero */
  --text-h1-long: clamp(1.9rem, 3vw, 2.75rem);   /* long titles: news stories, event pages */
  --text-h2: clamp(1.9rem, 3vw, 2.6rem);         /* section heading */
  --text-h3: clamp(1.4rem, 2.4vw, 1.9rem);       /* sub-section heading (e.g. newsletter sections) */
  --text-quote: clamp(1.4rem, 2.6vw, 2.2rem);    /* pull quotes */
  --text-number: clamp(3rem, 6vw, 4.5rem);       /* headline figures, date blocks */
  --tracking-tight: -.03em;    /* body headings */
  --tracking-tighter: -.045em; /* large display headings */
  --tracking-wide: .05em;
  --tracking-label: .12em;     /* uppercase eyebrows / labels */

  /* Corners */
  /* The first build's corner sizes now follow the design system's three radii (12 / 20 / 28px).
     The newsletter print view keeps its original values (newsletter-print.css). */
  --radius-xs: var(--ds-radius-sm);  /* was 4px */
  --radius-sm: var(--ds-radius-sm);  /* was 6px */
  --radius-md: var(--ds-radius-sm);  /* was 10px */
  --radius-lg: var(--ds-radius-md);  /* was 14px */
  --radius-xl: var(--ds-radius-md);        /* large feature panels */
  --radius-pill: 99px;
  --radius-round: 50%;

  /* Layout */
  --max: 1180px;
  --shadow: 0 18px 44px rgba(50, 16, 109, .14);
  --nav-height: 84px;

  /* ==========================================================================
     PMILC Website Design System (docs/PMILC Wesbite Design System.pdf):
     "Every page is built from one set of tokens." These --ds-* tokens are the
     source; the redesign tokens below point at them, so a design-system change
     is made here once. Living reference: /?pmilc-design-system (editors only).
     ========================================================================== */
  /* Colours */
  --ds-primary: #4F17A8;      /* Primary */
  --ds-night: #1A0B45;        /* Night */
  --ds-join: #FF7A1A;         /* Join / accent (always with Night text) */
  --ds-highlight: #12C2E9;    /* Highlight */
  --ds-tint: #EDE6FB;         /* Tint */
  /* Type: Sora for headlines and titles, Manrope for text */
  --ds-font-display: 'Sora', 'Inter', Arial, "Helvetica Neue", sans-serif;
  --ds-font-text: 'Manrope', 'Inter', Arial, "Helvetica Neue", sans-serif;
  --ds-weight-bold: 700;
  --ds-text-headline: clamp(2.25rem, 1.2rem + 3.6vw, 4rem);   /* Page headline: Sora 700 · 64px (36px on phones) */
  --ds-text-section: clamp(1.75rem, 1rem + 2.2vw, 2.625rem); /* Section title: Sora 700 · 42px (28px on phones, as the mobile prototypes and --text-section-sm; was 26px, so pages mixed 26 and 28: uniformity review, 2026-10-29) */
  --ds-text-intro: 1.1875rem; /* Intro text: Manrope · 19px */
  --ds-text-body-sm: .9375rem; /* Body: Manrope · 15px */
  --ds-text-body: 1rem;        /* Body: Manrope · 16px */
  --ds-text-body-lg: 1.0625rem; /* Body: Manrope · 17px */
  /* Components: pill buttons at 3 heights, 3 corner radii, glass cards with soft brand blurs */
  --ds-button-sm: 44px;
  --ds-button-md: 48px;
  --ds-button-lg: 54px;
  --ds-radius-sm: 12px;
  --ds-radius-md: 20px;
  --ds-radius-lg: 28px;
  /* Icon tiles and round icon buttons (not in the PDF; sized to sit with the buttons) */
  --ds-icon-sm: 44px;
  --ds-icon-md: 48px;
  --ds-icon-lg: 54px;
  /* 2026 redesign tokens (every redesigned page). Brand, type and corner
     values come from the --ds-* design-system tokens above. */
  --font-ui: var(--ds-font-text);
  --font-display: var(--ds-font-display);
  --muted-ui: #4E4866;        /* intro text, figure labels */
  --surface-soft: #FBFAFE;    /* hero background */
  --violet: #8B5CF6;          /* soft background blur */
  --cyan-ring: #0FB3D9;       /* students ring / dot */
  --cyan-wash: #E3F8FC;       /* icon circles */
  --cyan-ink-strong: #0A5566; /* text / icons on --cyan-wash, "+N this year" chip */
  --purple-tint-ui: var(--ds-tint);  /* icon circles */
  --orange-wash: #FFF1E6;     /* icon circles */
  --orange-ink: #BA4A00;      /* icons on --orange-wash; orange labels on white (4.6:1 on --orange-wash / --orange-tint, 5.2:1 on white) */
  --teal-ink: #0B7A93;        /* teal labels on white (news topics) */
  --highlight-glass: rgba(18, 194, 233, .22); /* tick circles on --purple */
  --cyan-light: #9DEBFA;      /* labels on --purple (membership strip) */
  --on-purple: #E4DCF7;       /* body text on --purple */
  --error-wash: #FDECEC;      /* form error box (subscribe pop-up) */
  --error-ink: #A1161D;       /* text on --error-wash */
  --purple-press: #3D1185;    /* purple button hover */
  --tbc-ink: #8A3600;         /* "TBC" chip text, on --orange-wash */
  --open-wash: #E3F6EC;       /* "Registration open" chip */
  --open-ink: #12663A;
  --held-wash: #EFEDF3;       /* "Held" chip; past date tiles use --held-tile */
  --held-tile: #F2F1F5;
  --radius-card: var(--ds-radius-lg);        /* glass card */
  --radius-picture: 8px;                     /* a picture shown whole over a blurred copy of itself (10px inside a 20px card) */
  --shadow-card: 0 10px 30px rgba(42, 12, 102, .06);
  --shadow-chip: 0 10px 30px rgba(42, 12, 102, .12); /* floating glass labels */
  --shadow-on-purple: 0 24px 60px rgba(26, 11, 69, .3); /* white cards on --purple bands */
  --shadow-button: 0 12px 28px rgba(79, 23, 168, .28);
  --text-ui-5xs: .5625rem;    /* 9px: not for text (below the 11px minimum for labels) */
  --text-ui-4xs: .625rem;     /* 10px: not for text (below the 11px minimum for labels) */
  --text-ui-3xs: .75rem;      /* 12px: eyebrows on phones, date tile labels, status chips (was 11px; 12px is the labels' minimum on phones, as .co-label: uniformity review, 2026-10-29) */
  --text-ui-2xs: .75rem;      /* 12px: eyebrows, chips */
  --text-ui-xl: var(--ds-text-intro);    /* 19px: hero intro */
  --text-ui-tile-sm: 1.25rem; /* 20px: date tile figure on phones */
  --text-card-title: 1.3125rem; /* 21px: event card title */
  --text-story-title: 1.375rem; /* 22px: news card title */
  --text-band: var(--ds-text-section); /* 28px phones → 44px: purple band headings (Community pages) */
  --text-section-sm: 1.75rem; /* 28px: section headings in the Community-page mobile prototypes */
  --text-ui-panel: 1.5rem;    /* 24px: form thank-you panel heading */
  --text-ui-step: 1.25rem;    /* 20px: numbered point titles (Volunteer, PMWB, Students) */
  --text-ui-tile: 1.625rem;   /* 26px: date tile figure; Events hero card title */
  --text-ui-tile-md: 1.875rem; /* 30px: Events list row date figure */
  --text-ui-tile-xl: 2.375rem; /* 38px: event page hero date figure */
  --text-hero-long: clamp(2rem, 1.2rem + 2.6vw, 3.25rem); /* 32px phones → 52px: long event titles */
  --text-ui-tile-lg: 2.25rem; /* 36px: Events hero card date figure */
  --text-about-col: clamp(1.375rem, 1.05rem + 1vw, 1.875rem); /* 22px phones → 30px: About column headings */
  --text-cta: var(--ds-text-section);         /* 24px phones → 40px: closing call-to-action panels */
  --text-strip: var(--ds-text-section);      /* 24px phones → 32px: membership strip heading */
  --text-section: var(--ds-text-section); /* 26px phones → 42px: section headings */
  --text-hero: var(--ds-text-headline);      /* 36px phones → 64px */
  --text-figure: clamp(3.5rem, 2.95rem + 2.25vw, 4.75rem); /* 56px phones → 76px from 1280px wide */
  --ink-strong: #1A1033;      /* text */
  --muted-strong: #5B5570;    /* secondary text (menu descriptions) */
  --night-deep: var(--ds-night);      /* top bar, phone menu */
  --on-night: #CFC6EA;        /* text on --night-deep */
  --night-line: #4A3A80;      /* icon-button borders on --night-deep */
  --night-divider: #3A2A70;   /* row dividers on --night-deep */
  --night-field: #241257;     /* input fields on dark (footer sign-up) */
  --blueprint-grid: rgba(18, 194, 233, .08);  /* PMWB "Blueprint": grid on --night-deep */
  --blueprint-line: rgba(18, 194, 233, .7);   /* its drawing lines */
  --blueprint-fill: rgba(18, 194, 233, .14);  /* its foundation stones */
  --blueprint-paper: rgba(26, 11, 69, .85);   /* its levels: Night over the grid, so the text stays clear */
  --line-soft: #ECE8F4;       /* header border, menu panel border */
  --line-control: #DCD4EE;    /* round icon-button borders on white */
  --purple-wash: #F1ECFB;     /* current-page pill */
  --purple-wash-hover: #F4F0FC;
  --join: var(--ds-join);            /* "Join PMI Lebanon": always with --night-deep text */
  --join-hover: #FF8F3D;
  --highlight: var(--ds-highlight);       /* current page / focus on --night-deep */
  --focus-ring: #8B5CF6;
  --text-ui-xs: .8125rem;     /* 13px: top bar, menu descriptions */
  --text-ui-sm: .875rem;      /* 14px: phone "Join" button */
  --text-ui: var(--ds-text-body-sm);        /* 15px: menu links, header buttons */
  --text-ui-md: var(--ds-text-body);         /* 16px: phone menu "Join" button */
  --text-ui-lg: 1.125rem;     /* 18px: phone menu links */
  --text-ui-lead: var(--ds-text-body-lg);  /* 17px: Board member bio */
  --radius-ui: var(--ds-radius-sm);          /* menu items */
  --shadow-menu: 0 24px 60px rgba(42, 12, 102, .12);
  --topbar-height: 40px;
  --header-height: calc(var(--topbar-height) + var(--nav-height)); /* top bar + menu bar, above the page */
  --max-wide: 1280px;         /* the redesign's content width */
  --hero-max-height: 840px;   /* full-screen heroes stop growing here, as on a 1080p desktop (4K and tall screens: components.css) */
  --hero-peek: 120px;         /* how much of the next section shows below a full-screen hero, so the page visibly continues */
}

@media (max-width: 1023px) { /* collapsed menu: navigation.css (no top bar) */
  :root {
    --nav-height: 68px;
    --header-height: var(--nav-height);
  }
}