/* ==========================================================================
   iCorrect design contract: tokens.css
   One file. Import it FIRST in anything you build (app, website, email prep).
   Every colour, size, space, radius, edge and font in a screen comes from here.
   If a value you need is not here, stop and ask. Do not invent it.

   Provenance of values (so nobody has to guess):
   - "system"  : from the iCorrect Design System colors_and_type.css (Claude Design)
   - "rule"    : from the six rules Claude Design gave on 2026-10-11
   - "polish"  : introduced in the approved intake polish v2 (derived, flagged)
   - "derived" : mixed or tuned from a system value for this contract (flagged)

   Fonts: Geist and Geist Mono (SIL OFL 1.1). Files live in ./fonts/ and are
   referenced relative to THIS css file. Copy the fonts folder with it.
   ========================================================================== */

/* ---- Fonts: BOTH families, from the design system's own files ------------ */
@font-face {
  font-family: "Geist";
  src: url("./fonts/Geist-Variable.woff2") format("woff2-variations"),
       url("./fonts/Geist-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("./fonts/GeistMono-Variable.woff2") format("woff2-variations"),
       url("./fonts/GeistMono-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
/* Metric-matched fallbacks. Same trick as next/font: the system font is resized and
   re-spaced to Geist's line box, so the swap from fallback to Geist does not move text.
   Measured in headless Chrome on 2026-10-11 (Geist runs 2.1 to 2.4 percent wider than Arial across
   weights 400 to 600, so 102.2 percent). Geist hhea ascent 1005, descent 295, units per em 1000. */
@font-face {
  font-family: "Geist Fallback";
  src: local("Arial"), local("Helvetica"), local("Liberation Sans");
  size-adjust: 102.2%;
  ascent-override: 98.3%;      /* 1005 / 1000 / 1.022 */
  descent-override: 28.9%;     /* 295 / 1000 / 1.022 */
  line-gap-override: 0%;
}
@font-face {
  font-family: "Geist Mono Fallback";
  src: local("Courier New"), local("Courier"), local("Liberation Mono");
  size-adjust: 100%;           /* both advance 0.6em */
  ascent-override: 100.5%;
  descent-override: 29.5%;
  line-gap-override: 0%;
}

:root {
  /* ======================================================================
     1. FAMILIES AND WEIGHTS  (rule 2, rule 5)
     Three weights only. 400 reads, 500 interacts, 600 announces.
     ====================================================================== */
  --font-sans: "Geist", "Geist Fallback", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  --font-mono: "Geist Mono", "Geist Mono Fallback", ui-monospace, SFMono-Regular, "Roboto Mono", Menlo, Monaco, "Liberation Mono", "DejaVu Sans Mono", "Courier New", monospace;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  /* ======================================================================
     2. COLOUR: NEUTRALS  (system)
     ====================================================================== */
  --gray-1000: #171717;   /* headings, ink */
  --gray-700:  #333333;
  --gray-600:  #4d4d4d;   /* body */
  --gray-500:  #666666;   /* secondary, labels */
  --gray-400:  #808080;   /* disabled text and decorative marks only. 3.9:1 on white: FAILS WCAG AA for small text */
  --gray-350:  #757575;   /* derived: placeholder text. 4.6:1 on white, passes AA. Found by the Impeccable detector. */
  --gray-300:  #a3a3a3;
  --gray-200:  #d4d4d4;
  --gray-100:  #ebebeb;
  --gray-50:   #fafafa;   /* quiet surface inside a white card */
  --white:     #ffffff;
  --black-alpha-4:  rgba(0, 0, 0, 0.04);
  --black-alpha-8:  rgba(0, 0, 0, 0.08);   /* hairline */
  --black-alpha-12: rgba(0, 0, 0, 0.12);   /* input edge */
  --black-alpha-24: rgba(0, 0, 0, 0.24);   /* input edge, hover */

  /* ======================================================================
     3. COLOUR: BRAND BLUE RAMP from #38598C
     600 is the brand ink. Blue is for the ONE primary action per view, links
     and focus-adjacent accents. Never wallpaper, never a glow, never a gradient.
     ====================================================================== */
  --blue-50:  #EAF0F8;   /* system tint */
  --blue-100: #D5E1F1;   /* derived */
  --blue-200: #B0C5E0;   /* derived */
  --blue-300: #8FB0E0;   /* system (blue on dark) */
  --blue-400: #5F83B8;   /* derived */
  --blue-500: #4A6FA5;   /* derived */
  --blue-600: #38598C;   /* system: brand ink, primary action */
  --blue-700: #2E4A72;   /* system: text on tint, hover */
  --blue-800: #263F63;   /* polish: pressed */
  --blue-900: #19283F;   /* derived */

  /* ======================================================================
     4. COLOUR: STATUS  (each is ink, tint, text-on-tint)
     Status is a tint PLUS a word or icon. Never colour alone.
     Orange is "needs attention". Green is done. Red is failed or destructive.
     ====================================================================== */
  --orange-ink:  #BC6A2C;   /* system */
  --orange-tint: #F6EADD;   /* system */
  --orange-text: #8F4E1C;   /* system */
  --green-ink:   #3F6B50;   /* system */
  --green-tint:  #E7EFE9;   /* system */
  --green-text:  #34593F;   /* system */
  --red-ink:     #A84B44;   /* system */
  --red-tint:    #F5E7E5;   /* polish: the system has no red tint, this is red-ink at about 13% on white */
  --red-text:    #8A3B35;   /* polish: derived */

  /* ======================================================================
     5. COLOUR: SEMANTIC ROLES  (use these in components, not the ramps above)
     ====================================================================== */
  --surface-page:   #F5F5F5;      /* rule 3: neutral light grey. Ricky rejected warm cream. */
  --surface-card:   var(--white);
  --surface-quiet:  var(--gray-50);
  --surface-dark:   #0a0a0a;      /* system: website footer and corporate band only */
  --text-heading:   var(--gray-1000);   /* rule 5 */
  --text-body:      var(--gray-600);    /* rule 5 */
  --text-secondary: var(--gray-500);    /* rule 5 */
  --text-placeholder: var(--gray-350);   /* was #808080 in the old system (3.9:1, fails AA) */
  --text-on-action: var(--white);
  --text-link:      var(--blue-600);
  --action:         var(--blue-600);
  --action-hover:   var(--blue-700);
  --action-pressed: var(--blue-800);
  --action-tint:    var(--blue-50);
  --action-tint-text: var(--blue-700);
  --attention-tint: var(--orange-tint);
  --attention-text: var(--orange-text);
  --attention-ink:  var(--orange-ink);
  --success-tint:   var(--green-tint);
  --success-text:   var(--green-text);
  --success-ink:    var(--green-ink);
  --danger-tint:    var(--red-tint);
  --danger-text:    var(--red-text);
  --danger-ink:     var(--red-ink);
  --selected-ring:  var(--gray-1000);   /* selection is neutral dark, not blue */
  --focus-color:    hsla(212, 100%, 48%, 1);   /* system */

  /* ======================================================================
     6. SPACING: 4 / 8 scale  (rule 6, "app screens tighter")
     --space-N is N x 4px.
     ====================================================================== */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  /* roles */
  --gap: var(--space-2);            /* 8px between sibling cards and controls in an app */
  --pad-card: var(--space-4);       /* 16px inside an app card */
  --pad-page-app: var(--space-4);   /* 16px phone gutter in an app */
  --pad-page-app-wide: var(--space-6);
  --pad-page-site: 20px;            /* website gutter, phone */
  --pad-page-site-wide: var(--space-8);
  --section-site: var(--space-24);  /* 96px website section padding, desktop */
  --section-site-phone: var(--space-12);
  --target-min: 44px;               /* every tappable thing is at least this tall */
  --field-height: 48px;
  --button-height: 44px;
  --chip-height: 24px;
  --page-max-app: 1120px;
  --page-max-site: 1200px;

  /* ======================================================================
     7. RADII  (system)
     ====================================================================== */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;     /* small controls, small buttons */
  --radius-lg: 8px;     /* buttons, fields, quiet cards, choice cards (app default) */
  --radius-xl: 12px;    /* elevated cards, panels, images */
  --radius-2xl: 16px;   /* hero and photo frames */
  --radius-full: 9999px; /* dots only. Not pill badges above headings. */

  /* ======================================================================
     8. EDGES, DIVIDERS, SHADOWS  (rule 6)
     Borders are drawn with box-shadow, never with border:.
     ====================================================================== */
  --edge:            0 0 0 1px var(--black-alpha-8);    /* card edge */
  --edge-input:      0 0 0 1px var(--black-alpha-12);
  --edge-input-hover: 0 0 0 1px var(--black-alpha-24);
  --edge-selected:   0 0 0 1.5px var(--selected-ring);
  --edge-strong:     0 0 0 1px var(--gray-1000);
  --rule-top:        inset 0 1px 0 var(--black-alpha-8);   /* hairline divider above a row */
  --rule-bottom:     inset 0 -1px 0 var(--black-alpha-8);
  --shadow-card-lift: 0 0 0 1px var(--black-alpha-8), 0 2px 2px rgba(0,0,0,0.04), 0 8px 8px -8px rgba(0,0,0,0.04), inset 0 0 0 1px var(--gray-50);  /* marketing elevated card only */
  --shadow-menu:     0 0 0 1px var(--black-alpha-8), 0 4px 8px rgba(0,0,0,0.04), 0 16px 24px -8px rgba(0,0,0,0.08);
  --focus-outline:   2px solid var(--focus-color);
  --focus-offset:    2px;

  /* ======================================================================
     9. MOTION
     ====================================================================== */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 150ms;
  --dur: 220ms;

  /* ======================================================================
     10. TYPE SCALE: APP  (rules 1, 4, 5)
     Strong jump from a 32px title to 14 to 15px body. Mono labels are small.
     ====================================================================== */
  --app-title-size: 32px;          /* rule 1: 30 to 32 in an app */
  --app-title-size-phone: 30px;
  --app-title-leading: 1.05;
  --app-title-tracking: -0.04em;   /* rule 1: -0.04em app */
  --app-section-size: 20px;
  --app-section-leading: 1.2;
  --app-section-tracking: -0.03em;
  --app-item-size: 15px;           /* item names, row titles: 600 */
  --app-item-leading: 1.3;
  --app-item-tracking: -0.01em;
  --app-body-size: 14px;           /* body floor. 400 at --text-body. */
  --app-body-leading: 1.43;
  --app-body-lg-size: 15px;
  --app-body-lg-leading: 1.4;
  --app-secondary-size: 13px;      /* captions and helper text only, never a paragraph the user must read */
  --app-secondary-leading: 1.4;
  --app-button-size: 14px;         /* 500 */
  --app-button-leading: 1;
  --app-input-size: 15px;
  --app-input-size-phone: 16px;    /* 16px stops iOS zoom on focus */

  /* ======================================================================
     11. TYPE SCALE: MONO LABELS  (rule 4)
     Section labels, metadata, footers, status words. NEVER content, NEVER
     field values, NEVER prose.
     ====================================================================== */
  --label-size: 11px;              /* 11 to 12 */
  --label-size-lg: 12px;
  --label-leading: 1.2;
  --label-tracking: 0.07em;        /* 0.06 to 0.08 */
  --label-weight: 400;
  --label-color: var(--text-secondary);   /* #666 (5.7:1 on white, passes AA). Do not use #808080 for 11px text: 3.9:1 fails AA. */
  --chip-weight: 500;
  --chip-tracking: 0.06em;

  /* ======================================================================
     12. TYPE SCALE: DISPLAY (marketing, posters, case studies)
     Source: design system colors_and_type.css, tracking converted to em.
     ====================================================================== */
  --display-xl-size: 64px;
  --display-xl-leading: 1;
  --display-xl-tracking: -0.045em;   /* system: -2.88px */
  --display-size: 48px;              /* rule 1: 48px display */
  --display-leading: 1.05;
  --display-tracking: -0.05em;       /* rule 1: -0.05em display (-2.4px) */
  --h1-size: 40px;
  --h1-leading: 1.1;
  --h1-tracking: -0.05em;            /* derived: system had -2.4px (-0.06em), aligned to rule 1 */
  --h2-size: 32px;
  --h2-leading: 1.2;
  --h2-tracking: -0.04em;            /* system: -1.28px */
  --h3-size: 24px;
  --h3-leading: 1.3;
  --h3-tracking: -0.04em;            /* system: -0.96px */
  --h4-size: 20px;
  --h4-leading: 1.35;
  --h4-tracking: -0.03em;            /* system: -0.6px */
  --body-lg-size: 18px;
  --body-lg-leading: 1.55;
  --body-size: 16px;
  --body-leading: 1.5;
  --body-sm-size: 14px;
  --body-sm-leading: 1.43;
  --caption-size: 12px;
  --caption-leading: 1.33;
  /* phone steps for display type (websites) */
  --display-xl-size-phone: 44px;
  --display-size-phone: 36px;
  --h1-size-phone: 32px;
  --h2-size-phone: 28px;
  --h3-size-phone: 22px;

  /* ======================================================================
     13. TYPE SCALE: EMAIL
     Email clients drop web fonts and most letter-spacing. Design for the
     fallback first. Geist is a progressive enhancement only.
     ====================================================================== */
  --email-width: 600px;
  --email-title-size: 28px;
  --email-title-leading: 1.15;
  --email-title-tracking: -0.5px;
  --email-body-size: 16px;
  --email-body-leading: 1.5;
  --email-small-size: 13px;
  --email-label-size: 11px;
  --email-label-tracking: 1px;
  --email-button-height: 48px;
  --email-font: "Geist", Arial, Helvetica, sans-serif;
  --email-mono: "Geist Mono", "Courier New", Courier, monospace;

  /* ======================================================================
     14. BREAKPOINTS (informational: CSS cannot use variables in @media)
     phone 390, tablet 820, laptop 1024, desktop 1440. Break at 640 and 880.
     ====================================================================== */
  --bp-phone: 390px;
  --bp-sm: 640px;
  --bp-tablet: 820px;
  --bp-md: 880px;
  --bp-lg: 1024px;
  --bp-desktop: 1440px;
}

/* ==========================================================================
   BASE: reset, smoothing, text wrap  (rules 2 and 6)
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--surface-page);
  font-family: var(--font-sans);
  font-feature-settings: normal;          /* rule 2: no Inter-only cv11 or ss01 */
  -webkit-font-smoothing: antialiased;    /* rule 2 */
  -moz-osx-font-smoothing: grayscale;     /* rule 2 */
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-sans);
  font-size: var(--app-body-size);
  font-weight: var(--weight-regular);
  line-height: var(--app-body-leading);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  margin: 0;
  color: var(--text-heading);
  font-weight: var(--weight-semibold);
  text-wrap: balance;                      /* rule 6 */
}
h1 { font-size: var(--app-title-size); line-height: var(--app-title-leading); letter-spacing: var(--app-title-tracking); }
h2 { font-size: var(--app-section-size); line-height: var(--app-section-leading); letter-spacing: var(--app-section-tracking); }
h3 { font-size: var(--app-item-size); line-height: var(--app-item-leading); letter-spacing: var(--app-item-tracking); }
h4 { font-size: var(--app-body-size); line-height: var(--app-body-leading); }
@media (max-width: 640px) {
  h1 { font-size: var(--app-title-size-phone); }
}

p {
  margin: 0;
  text-wrap: pretty;                       /* rule 6 */
}

button, input, select, textarea, summary {
  font-family: var(--font-sans);
  font-feature-settings: normal;
}

:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
}

img, svg, video { display: block; max-width: 100%; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}