/* ============================================================
   Medicon Applications — Polestar-derived token system
   ============================================================
   Canonical face: Polestar Unica. Substituted with Inter, loaded
   in functions.php. When the Unica licence lands, drop the .woff2
   files into assets/fonts/ and uncomment the @font-face block.
   ============================================================ */

/*
@font-face {
  font-family: 'Polestar Unica';
  src: url('../fonts/PolestarUnica-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
*/

/* Metric-matched fallback.
 *
 * The biggest motion event on this site is the web-font swap. Measured at
 * 375x812 by forcing the stack: the h1 goes 141 -> 212px (4 lines -> 6) and the
 * first application row moves 663 -> 779px. Inter's advance is ~4.4% wider than
 * Arial, so the damage is entirely horizontal — it changes line COUNTS.
 *
 * local('Arial') rather than Helvetica Neue because Arial exists on macOS,
 * Windows and Android, giving one consistent metric everywhere instead of
 * 110.8% on Mac and 104.4% on Windows.
 */
@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial'), local('Liberation Sans'), local('Helvetica');
  size-adjust: 104.4%;
  ascent-override: 92.3%;
  descent-override: 23.0%;
  line-gap-override: 0%;
}

:root {
  /* ---------- COLOR ---------- */
  --ps-white:        #FFFFFF;
  --ps-near-white:   #F4F4F4;
  --ps-line-light:   #E5E5E5;
  --ps-grey-300:     #C7C7C7;
  /* #8A8A8A is 3.45:1 on white — LARGE TEXT ONLY (>=24px). Do not use it for
     eyebrows, captions, labels or any interactive text. Use --ps-grey-700
     (#4A4A4A, 8.86:1) for those. */
  --ps-grey-500:    #8A8A8A;
  --ps-grey-700:    #4A4A4A;
  --ps-line-dark:    #2A2A2A;
  --ps-near-black:   #1A1A1A;
  --ps-black:        #000000;

  /* Reserved — sign-off required before use. */
  --ps-gold:         #C9A86A;
  --ps-link-blue:    #3B6FE0;
  --ps-error:        #C53030;
  --ps-success:      #2F855A;
  --ps-warning:      #B7791F;

  /* Semantic — light mode (default) */
  --bg:           var(--ps-white);
  --bg-elev:      var(--ps-near-white);
  --fg:           var(--ps-black);
  --fg-muted:     var(--ps-grey-700);
  --fg-subtle:    var(--ps-grey-500);
  --line:         var(--ps-line-light);
  --link:         var(--ps-link-blue);
  --focus:        var(--ps-link-blue);

  /* ---------- TYPE ---------- */
  /* 'Polestar Unica' is dropped from the live stacks: its @font-face is
     commented out above, so it was a guaranteed miss on every lookup. Put it
     back in front of 'Inter' on both lines when the licence lands. */
  --font-display: 'Inter', 'Inter Fallback', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Inter', 'Inter Fallback', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, Menlo, monospace;

  --fw-thin:    200;
  --fw-light:   300;
  --fw-regular: 400;
  --fw-medium:  500;

  --t-eyebrow:    11px;
  --t-eyebrow-lg: 12px;
  --t-caption:    13px;
  --t-small:      14px;
  --t-body:       16px;
  --t-body-lg:    18px;
  --t-lead:       22px;
  --t-h4:         28px;
  --t-h3:         40px;
  --t-h2:         56px;
  --t-h1:         88px;
  --t-display:   132px;
  --t-stat:      112px;

  /* Fluid display ramps — used by the page-opening headings so they scale
     continuously instead of dropping 40% at a single breakpoint. */
  /* display-1 is the page h1; display-2 is a section heading. display-2 must
     stay BELOW display-1 at every viewport — it previously topped out at 80px
     against the h1's 72px, so section headings outranked the page title on any
     screen wider than ~1480px. */
  --t-display-1: clamp(36px, 4.6vw, 72px);
  --t-display-2: clamp(32px, 4.0vw, 62px);

  --tr-display:  -0.028em;
  --tr-h1:       -0.024em;
  --tr-h2:       -0.022em;
  --tr-h3:       -0.018em;
  --tr-h4:       -0.014em;
  --tr-body:      0;
  --tr-small:     0.005em;
  --tr-eyebrow:   0.22em;
  --tr-tag:       0.10em;

  --lh-display:  0.94;
  --lh-h1:       0.96;
  --lh-h2:       1.00;
  --lh-h3:       1.05;
  --lh-lead:     1.45;
  --lh-body:     1.50;
  --lh-tight:    1.20;

  /* ---------- SPACING (8px base) ---------- */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;
  --sp-10: 128px;
  --sp-11: 192px;

  --page-gutter-desktop: 48px;
  --page-gutter-mobile:  24px;
  --page-max:           1440px;

  /* ---------- RADII (almost always 0) ---------- */
  --r-none: 0;
  --r-xs:   2px;
  --r-pill: 999px;

  /* ---------- BORDERS ---------- */
  --bw: 1px;
  --border-light: 1px solid var(--ps-line-light);
  --border-dark:  1px solid var(--ps-line-dark);

  /* ---------- SHADOW (rare) ---------- */
  --shadow-overlay: 0 4px 24px rgba(0,0,0,0.08);
  --shadow-modal:   0 24px 64px rgba(0,0,0,0.12);
  --shadow-tile:    0 8px 24px rgba(0,0,0,0.18);

  /* ---------- MOTION ---------- */
  --ease-ps:   cubic-bezier(0.32, 0.72, 0, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);

  --dur-instant: 0ms;
  --dur-fast:   180ms;
  --dur-med:    240ms;
  --dur-mid:    320ms;
  --dur-slow:   600ms;
  --dur-hero:   900ms;

  /* ---------- LAYOUT ---------- */
  --nav-h:      64px;
  --nav-h-lg:   72px;
  --container:  1440px;
}