/* =================================================================
   MUWCI Design System — Design Tokens  (single source of truth)
   UWC Brand Toolkit v1.0 + MUWCI logo update + "UWC Mahindra College"
   Figma reconciliation (Jul 2026).

   This file is the ONE place type, colour and spacing are defined.
   Everything — preview cards, components, templates — binds to it.
   • Colour palette expanded to match the Figma primitives
     (adds cream, navy, blue-25/alpha, per-hue 25% tints).
   • Type is a fluid, role-based scale (.t-hero … .t-caption).
     NEVER set ad-hoc font-size / weight — reference a role or a
     --type-* token. The old uppercase-light heading classes are gone.
   ================================================================= */

/* Component styles (affordances + shared primitives). @import must lead. */
@import 'components/ui.css';
@import 'components/forms.css';

/* ---------------- Font faces (variable TTF, weights 200–900) ------ */
@font-face {
  font-family: 'Source Serif 4';
  src: url('fonts/SourceSerif4-VariableFont_opsz_wght.ttf') format('truetype');
  font-weight: 200 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Source Serif 4';
  src: url('fonts/SourceSerif4-Italic-VariableFont_opsz_wght.ttf') format('truetype');
  font-weight: 200 900; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Source Sans 3';
  src: url('fonts/SourceSans3-VariableFont_wght.ttf') format('truetype');
  font-weight: 200 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Source Sans 3';
  src: url('fonts/SourceSans3-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: 200 900; font-style: italic; font-display: swap;
}

:root {
  /* ================= COLOUR — primitives ================= */
  /* Primary */
  --color-blue:          #0064a6;   /* Pantone 2945 C — UWC Blue, lead colour */
  --color-blue-dark:     #00527f;   /* hover / active */
  --color-blue-50:       #80b1d2;   /* 50% tint */
  --color-blue-25:       #d3e4f0;   /* 25% tint — soft fills, hover wells */
  --color-blue-alpha-75: rgba(0,100,166,0.75);  /* image overlays */

  --color-teal:          #009b90;   /* Pantone 3285 C — UWC Teal, co-lead */
  --color-teal-dark:     #007770;   /* hover / active */
  --color-teal-50:       #80cdc7;
  --color-teal-25:       #d3f5f2;

  /* Secondary — accents only, max two per piece */
  --color-burnt:         #983e09;   --color-burnt-50:   #cc9f84;  --color-burnt-25:   #faeae1;
  --color-magenta:       #741669;   --color-magenta-50: #ba8bb4;  --color-magenta-25: #f5e1f3;
  --color-crimson:       #ad1644;   --color-crimson-50: #d68ba2;  --color-crimson-25: #fae6ec;
  --color-orange:        #de6328;   --color-orange-50:  #efb194;  --color-orange-25:  #fae6dc;

  /* Editorial neutrals */
  --color-navy:          #0a1f2e;   /* deep hero / footer ground */
  --color-navy-25:       #c0d9eb;
  --color-cream:         #faf6ee;   /* warm section ground */
  --color-cream-25:      #fefdfb;

  /* Greys + ink */
  --color-grey-75:       #504f52;   /* darker grey — body copy (stronger contrast than grey) */
  --color-grey:          #717073;   /* Cool Grey 11 — secondary / meta copy */
  --color-grey-50:       #b8b8b9;
  --color-grey-25:       #dcdcdd;   /* hairlines, borders */
  --color-grey-10:       #f0f0f0;   /* subtle fills */
  --color-black:         #111111;   /* ink / strong text */
  --color-paper:         #fafafa;   /* off-white page ground (the site's "white") */
  --color-white:         #ffffff;   /* pure white — cards on paper, negative logo backing */

  /* ================= COLOUR — semantic ================= */
  /* Body text uses grey-75 (#504f52) for stronger contrast; grey stays for meta. */
  --color-text:          var(--color-grey-75);
  --color-text-strong:   var(--color-black);
  --color-text-inverse:  var(--color-paper);
  --color-link:          var(--color-blue);
  --color-link-hover:    var(--color-blue-dark);
  --color-bg:            var(--color-paper);
  --color-bg-alt:        var(--color-cream);
  --color-bg-well:       var(--color-grey-10);
  --color-bg-dark:       var(--color-navy);
  --color-border:        var(--color-grey-25);
  --color-brand:         var(--color-blue);
  --color-brand-alt:     var(--color-teal);

  /* -------- Back-compat aliases (--muwci-*) — do not extend -------- */
  --muwci-blue: var(--color-blue);   --muwci-blue-50: var(--color-blue-50);   --muwci-blue-dark: var(--color-blue-dark);
  --muwci-teal: var(--color-teal);   --muwci-teal-50: var(--color-teal-50);   --muwci-teal-dark: var(--color-teal-dark);
  --muwci-burnt: var(--color-burnt); --muwci-burnt-50: var(--color-burnt-50);
  --muwci-magenta: var(--color-magenta); --muwci-magenta-50: var(--color-magenta-50);
  --muwci-crimson: var(--color-crimson); --muwci-crimson-50: var(--color-crimson-50);
  --muwci-orange: var(--color-orange);   --muwci-orange-50: var(--color-orange-50);
  --muwci-grey: var(--color-grey); --muwci-grey-50: var(--color-grey-50); --muwci-grey-25: var(--color-grey-25); --muwci-grey-10: var(--color-grey-10);
  --muwci-black: var(--color-black); --muwci-white: var(--color-white);

  /* ================= TYPOGRAPHY ================= */
  --font-serif: 'Source Serif 4', 'Bliss', Georgia, serif;   /* headings, display, quotes */
  --font-sans:  'Source Sans 3', 'Myriad Pro', Arial, sans-serif;   /* body, UI, labels */
  /* Legacy aliases */
  --font-brand: var(--font-serif);
  --font-body:  var(--font-sans);

  /* Fluid role scale — clamp(MOBILE floor, calc() fluid middle, DESKTOP ceiling).
     16px root; rem-based so browser zoom flows through. Body is 16 / 17 / 18 px
     (mobile / tablet / desktop). Headings are ONE continuous serif ladder:
     hero > display > title > h1 > h2 > h3 > h4 > h5 > h6. */
  --fs-hero:     clamp(3.5rem, calc(2.44rem + 4.51vw), 6.5rem);     /* @kind font */ /* 56-104 statement hero */
  --fs-display:  clamp(2.75rem, calc(1.87rem + 3.76vw), 5.25rem);   /* @kind font */ /* 44-84 display */
  --fs-title:    clamp(2.125rem, calc(1.64rem + 2.07vw), 3.5rem);   /* @kind font */ /* 34-56 section title */
  --fs-h1:       clamp(2rem, calc(1.65rem + 1.50vw), 3rem);         /* @kind font */ /* 32-48 */
  --fs-h2:       clamp(1.6875rem, calc(1.40rem + 1.22vw), 2.5rem);  /* @kind font */ /* 27-40 */
  --fs-h3:       clamp(1.5rem, calc(1.32rem + 0.75vw), 2rem);       /* @kind font */ /* 24-32 */
  --fs-h4:       clamp(1.3125rem, calc(1.18rem + 0.56vw), 1.6875rem);/* @kind font */ /* 21-27 */
  --fs-h5:       clamp(1.1875rem, calc(1.12rem + 0.28vw), 1.375rem);/* @kind font */ /* 19-22 */
  --fs-h6:       clamp(1rem, calc(0.96rem + 0.19vw), 1.125rem);     /* @kind font */ /* 16-18 (body size, serif) */
  --fs-lede:     clamp(1.125rem, calc(1.04rem + 0.38vw), 1.375rem); /* @kind font */ /* 18-22 serif intro */
  --fs-body-lg:  clamp(1.0625rem, calc(1.0rem + 0.28vw), 1.25rem);  /* @kind font */ /* 17-20 */
  --fs-body:     clamp(1rem, calc(0.96rem + 0.19vw), 1.125rem);     /* @kind font */ /* 16-17-18 base body */
  --fs-body-sm:  clamp(0.9375rem, calc(0.92rem + 0.09vw), 1rem);    /* @kind font */ /* 15-16 */
  --fs-small:    clamp(0.875rem, calc(0.85rem + 0.09vw), 0.9375rem);/* @kind font */ /* 14-15 below body */
  --fs-caption:  clamp(0.8125rem, calc(0.79rem + 0.09vw), 0.875rem);/* @kind font */ /* 13-14 */
  --fs-quote:    clamp(1.25rem, calc(1.07rem + 0.75vw), 1.75rem);   /* @kind font */ /* 20-28 pull quote */
  --fs-eyebrow:  clamp(0.6875rem, calc(0.66rem + 0.07vw), 0.75rem); /* @kind font */ /* 11-12 caps kicker */
  --fs-label:    clamp(0.875rem, calc(0.83rem + 0.18vw), 1rem);     /* @kind font */ /* 14-16 sans UI label (was --fs-h3) */

  /* Weights (variable font) — light/black reserved for display only */
  --fw-light: 300;    /* @kind font */
  --fw-regular: 400;  /* @kind font */
  --fw-medium: 500;   /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold: 700;     /* @kind font */

  /* Line-height scale */
  --lh-tight: 1.1;    /* @kind font */
  --lh-snug: 1.25;    /* @kind font */
  --lh-normal: 1.5;   /* @kind font */
  --lh-relaxed: 1.65; /* @kind font */

  /* Tracking scale */
  --tracking-tight: -0.01em;    /* @kind font */
  --tracking-normal: 0;         /* @kind font */
  --tracking-wide: 0.05em;      /* @kind font */
  --tracking-caps: 0.08em;      /* @kind font */
  --tracking-caps-wide: 0.14em; /* @kind font */

  /* ================= SPACING (4px base) ================= */
  --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;     --space-10: 8rem;
  --section-y: clamp(3.5rem, calc(2rem + 6vw), 6rem);   /* @kind spacing */
  --gutter-x:  clamp(1.5rem, calc(0.5rem + 4vw), 6rem);  /* @kind spacing */

  /* ================= LAYOUT ================= */
  --content-max:  1200px;
  --content-wide: 1440px;
  --gutter: var(--space-5);

  /* ================= RADIUS ================= */
  /* The brand is deliberately square. Buttons/inputs are the ONLY curved
     elements, at a small 4px. Never exceed --radius-md on structural UI. */
  --radius-none: 0; --radius-sm: 2px; --radius-md: 4px; --radius-pill: 999px;

  /* ================= ELEVATION ================= */
  --shadow-1: 0 1px 2px rgba(17,17,17,0.06), 0 1px 1px rgba(17,17,17,0.04);
  --shadow-2: 0 4px 12px rgba(17,17,17,0.08), 0 2px 4px rgba(17,17,17,0.04);
  --shadow-3: 0 12px 32px rgba(17,17,17,0.12), 0 4px 8px rgba(17,17,17,0.06);

  /* ================= BANNER DEVICE ================= */
  --banner-height: 24px; /* @kind spacing */ --banner-bg: var(--color-blue); --banner-fg: var(--color-white);

  /* ================= MOTION ================= */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1); /* @kind other */
  --dur-fast: 150ms; /* @kind other */
  --dur-med: 250ms;  /* @kind other */
  --dur-slow: 400ms; /* @kind other */
}

/* ===================================================================
   RESET
   =================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font: var(--fw-regular) var(--fs-body)/var(--lh-normal) var(--font-sans);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ===================================================================
   TYPOGRAPHY — role classes (the ONLY type styles the app references)
   Headings are mixed-case serif. Do NOT set the serif in ALL CAPS.
   Only eyebrows, labels and buttons are uppercase (sans).
   =================================================================== */
.t-hero    { font: var(--fw-regular) var(--fs-hero)/0.98 var(--font-serif); letter-spacing: -0.025em; color: var(--color-text-strong); text-wrap: balance; }
.t-display { font: var(--fw-regular) var(--fs-display)/1.02 var(--font-serif); letter-spacing: -0.02em; color: var(--color-text-strong); text-wrap: balance; }
.t-title   { font: var(--fw-regular) var(--fs-title)/1.06 var(--font-serif); letter-spacing: -0.015em; color: var(--color-text-strong); text-wrap: balance; }
.t-h1      { font: var(--fw-regular) var(--fs-h1)/1.12 var(--font-serif); letter-spacing: -0.01em; color: var(--color-text-strong); text-wrap: balance; }
.t-h2      { font: var(--fw-semibold) var(--fs-h2)/1.18 var(--font-serif); letter-spacing: -0.008em; color: var(--color-text-strong); text-wrap: balance; }
.t-h3      { font: var(--fw-semibold) var(--fs-h3)/1.22 var(--font-serif); letter-spacing: -0.005em; color: var(--color-text-strong); text-wrap: balance; }
.t-h4      { font: var(--fw-semibold) var(--fs-h4)/1.28 var(--font-serif); letter-spacing: -0.003em; color: var(--color-text-strong); text-wrap: balance; }
.t-h5      { font: var(--fw-semibold) var(--fs-h5)/1.32 var(--font-serif); color: var(--color-text-strong); text-wrap: balance; }
.t-h6      { font: var(--fw-semibold) var(--fs-h6)/1.4 var(--font-serif); color: var(--color-text-strong); text-wrap: balance; }
.t-lede    { font: var(--fw-regular) var(--fs-lede)/1.5 var(--font-serif); letter-spacing: -0.005em; color: var(--color-text-strong); text-wrap: pretty; }
.t-eyebrow { font: var(--fw-bold) var(--fs-eyebrow)/1 var(--font-sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-brand); }
.t-label   { font: var(--fw-bold) var(--fs-label)/1.3 var(--font-sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-strong); }
.t-meta    { font: var(--fw-bold) var(--fs-small)/1.2 var(--font-sans); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-text); }
.t-body-lg { font: var(--fw-regular) var(--fs-body-lg)/1.6 var(--font-sans); color: var(--color-text); text-wrap: pretty; }
.t-body    { font: var(--fw-regular) var(--fs-body)/1.6 var(--font-sans); color: var(--color-text); text-wrap: pretty; }
.t-body-sm { font: var(--fw-regular) var(--fs-body-sm)/1.6 var(--font-sans); color: var(--color-text); text-wrap: pretty; }
.t-small   { font: var(--fw-regular) var(--fs-small)/1.55 var(--font-sans); color: var(--color-text); text-wrap: pretty; }
.t-quote   { font: italic var(--fw-regular) var(--fs-quote)/1.35 var(--font-serif); letter-spacing: -0.005em; color: var(--color-text-strong); text-wrap: balance; }
.t-caption { font: var(--fw-regular) var(--fs-caption)/1.55 var(--font-sans); color: var(--color-text); }
.t-button  { font: var(--fw-bold) var(--fs-label)/1 var(--font-sans); letter-spacing: var(--tracking-caps); text-transform: uppercase; }

/* On dark grounds (navy hero, footer) headings & body flip to paper */
.on-dark .t-hero, .on-dark .t-display, .on-dark .t-title,
.on-dark .t-h1, .on-dark .t-h2, .on-dark .t-h3, .on-dark .t-h4,
.on-dark .t-h5, .on-dark .t-h6, .on-dark .t-lede, .on-dark .t-quote,
.on-dark .t-body-lg, .on-dark .t-body, .on-dark .t-body-sm,
.on-dark .t-small, .on-dark .t-caption, .on-dark .t-label { color: var(--color-text-inverse); }
.on-dark .t-eyebrow { color: var(--color-teal-50); }

.t-mono { font-family: 'SF Mono', Menlo, Consolas, monospace; font-size: 0.8125rem; }

/* Default links — ONLY unclassed anchors (component anchors keep their own styles) */
a:not([class]) { color: var(--color-link); text-decoration: none; }
a:not([class]):hover { color: var(--color-link-hover); text-decoration: underline; }