/* ==========================================================================
   YNEPF design tokens

   Colour comes from ONE place: design/Light theme.tokens.json, turned into
   palette.css by scripts/generate-palette.js. Nothing here hard-codes a hex
   value from a ramp; components use the ROLE tokens below, never the raw ramps.

   Colour roles
     Iron Oxide   all actions (buttons, primary calls to action)
     Slate Navy   everything else: text, headings, links, surfaces, structure
     Sage Green   success          Soft Rose   errors and failures
     Gold         focus only       Neutral Grey  borders, quiet text

   Note on the source tokens: Iron Oxide 300 = 400 and Slate Navy 800 = 900.
   They are duplicated in the design file, so those steps look identical.

   Type and spacing follow the GOV.UK scales (sizes step up at the tablet
   breakpoint, 641px). Every text/background pairing below was checked for
   WCAG 2.1 AA (see the table in README.md).
   ========================================================================== */
@import url("palette.css");

:root {
  /* ---- Surfaces ---- */
  --surface-page: var(--navy-10);         /* off-white page background */
  --surface-canvas: var(--navy-10);
  --surface-raised: #FFFFFF;              /* cards: white on the off-white page */
  --surface-muted: var(--navy-50);
  --surface-inverse: var(--navy-800);     /* header bar, dark bands */
  --surface-deep: var(--navy-950);        /* hero, drawer, footer */

  /* ---- Text ---- */
  --text-default: var(--grey-900);        /* 15.4:1 on white */
  --text-heading: var(--navy-800);        /* 14.3:1 on white */
  --text-muted: var(--grey-700);          /* 6.9:1 on white */
  --text-on-inverse: #FFFFFF;             /* 14.3:1 on navy-800 */
  --text-on-inverse-muted: var(--navy-100); /* 9.5:1 on navy-800 */
  --text-on-muted: var(--navy-800);       /* 11.5:1 on navy-50 */

  /* ---- Links ---- */
  --link: var(--navy-700);                /* 10.9:1 on white */
  --link-hover: var(--navy-950);
  --link-visited: var(--iron-700);        /* 7.6:1 on white */
  --link-on-inverse: #FFFFFF;
  --link-on-inverse-hover: var(--iron-100);

  /* ---- Actions (Iron Oxide) ---- */
  --accent: var(--iron-600);              /* white text 5.7:1 */
  --accent-hover: var(--iron-700);        /* white text 7.6:1 */
  --accent-active: var(--iron-800);
  --accent-text: #FFFFFF;
  --accent-ink: var(--iron-700);          /* iron as text on white 7.6:1 */
  --accent-tint: var(--iron-50);
  --accent-soft: var(--iron-500);         /* decoration only, never behind text */

  /* ---- Feedback ---- */
  --success-bg: var(--sage-50);   --success-border: var(--sage-600);  --success-text: var(--sage-800);   /* 8.6:1 */
  --error-bg: var(--rose-50);     --error-border: var(--rose-600);    --error-text: var(--rose-800);     /* 8.2:1 */
  --info-bg: var(--navy-50);      --info-border: var(--navy-600);     --info-text: var(--navy-800);

  /* ---- Borders ---- */
  --border: var(--navy-50);               /* quiet hairlines, used sparingly */
  --border-strong: var(--grey-500);       /* form fields: 3.9:1 against white */

  /* ---- Focus (gold, never used for anything else) ---- */
  --focus: var(--gold-300);               /* highlight / ring */
  --focus-text: var(--navy-950);          /* ink on the highlight */

  /* ---- Status tags (dark text on light tint) ---- */
  --tag-open-bg: var(--sage-100);     --tag-open-text: var(--sage-800);     /* 7.2:1 */
  --tag-closed-bg: var(--grey-100);   --tag-closed-text: var(--grey-800);   /* 7.7:1 */
  --tag-position-bg: var(--rose-100); --tag-position-text: var(--rose-800); /* 6.4:1 */
  --tag-full-bg: var(--gold-100);     --tag-full-text: var(--gold-800);     /* 7.5:1 */
  --tag-alpha-bg: var(--navy-100);    --tag-alpha-text: var(--navy-800);    /* 9.5:1 */

  /* ---- Radii: soft, nested shapes ---- */
  --radius-sm: 0.5rem;     /* 8px   chips, inputs inside cards */
  --radius: 0.75rem;       /* 12px  buttons, inputs */
  --radius-md: 1rem;       /* 16px  segmented controls */
  --radius-lg: 1.25rem;    /* 20px  cards */
  --radius-xl: 1.75rem;    /* 28px  panels, hero media */
  --radius-pill: 999px;

  /* ---- Elevation: soft, tinted from the palette. Cards use shadow, not outlines. ---- */
  --shadow-sm: 0 1px 2px color-mix(in srgb, var(--navy-950) 5%, transparent);
  --shadow-md: 0 14px 32px -18px color-mix(in srgb, var(--navy-950) 22%, transparent), 0 1px 2px color-mix(in srgb, var(--navy-950) 5%, transparent);
  --shadow-lg: 0 28px 60px -28px color-mix(in srgb, var(--navy-950) 40%, transparent);

  /* ---- Layout ---- */
  --measure: 38rem;              /* readable text column (~66 characters) */
  --container: 60rem;            /* page content max width: 960px, as GOV.UK and the NHS */
  --container-wide: 75rem;       /* breakout width for hero and image bands: 1200px */
  --page-margin: 1rem;           /* side margin on mobile (16px) */
  --page-margin-tablet: 1.875rem; /* side margin from tablet up (30px) */
  --gutter: 1.875rem;            /* space between grid columns (30px) */
  --header-height: 4.25rem;
  /* How far a photo may bleed past the 960px column on wide screens (never more than 4rem; 0 when there is no room). */
  --bleed: max(-4rem, min(0px, calc((100vw - var(--container)) / -2 + var(--page-margin-tablet))));

  /* ---- Type families ---- */
  --font-body: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --font-display: "Cutmark", "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;

  /* ---- GOV.UK type scale: mobile value here, tablet value in the media query ---- */
  --fs-80: 3.3125rem;  --lh-80: 1.04;     /* 53px  hero */
  --fs-48: 2rem;       --lh-48: 1.1;      /* 32px  h1 */
  --fs-36: 1.6875rem;  --lh-36: 1.11;     /* 27px  h2 */
  --fs-27: 1.5rem;     --lh-27: 1.25;     /* 24px  lead text */
  --fs-24: 1.125rem;   --lh-24: 1.3;      /* 18px  h3 */
  --fs-19: 1rem;       --lh-19: 1.5;      /* 16px  body, h4 */
  --fs-16: 0.875rem;   --lh-16: 1.45;     /* 14px  small */
  --fs-14: 0.75rem;    --lh-14: 1.4;      /* 12px  captions */

  /* ---- GOV.UK spacing scale: 0 to 9, mobile value here ---- */
  --space-0: 0;
  --space-1: 0.3125rem;   /* 5px */
  --space-2: 0.625rem;    /* 10px */
  --space-3: 0.9375rem;   /* 15px */
  --space-4: 0.9375rem;   /* 15px, 20px from tablet */
  --space-5: 0.9375rem;   /* 15px, 25px from tablet */
  --space-6: 1.25rem;     /* 20px, 30px from tablet */
  --space-7: 1.5625rem;   /* 25px, 40px from tablet */
  --space-8: 1.875rem;    /* 30px, 50px from tablet */
  --space-9: 2.5rem;      /* 40px, 60px from tablet */

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 150ms;
  --dur: 280ms;
  --dur-slow: 600ms;
}

/* Tablet and up (641px): the scales step up, exactly as GOV.UK does. */
@media (min-width: 40.0625em) {
  :root {
    --fs-80: 5rem;       --lh-80: 1;
    --fs-48: 3rem;       --lh-48: 1.0417;
    --fs-36: 2.25rem;    --lh-36: 1.1111;
    --fs-27: 1.6875rem;  --lh-27: 1.1111;
    --fs-24: 1.5rem;     --lh-24: 1.25;
    --fs-19: 1.1875rem;  --lh-19: 1.3158;
    --fs-16: 1rem;       --lh-16: 1.5;
    --fs-14: 0.875rem;   --lh-14: 1.4286;

    --space-4: 1.25rem;     /* 20px */
    --space-5: 1.5625rem;   /* 25px */
    --space-6: 1.875rem;    /* 30px */
    --space-7: 2.5rem;      /* 40px */
    --space-8: 3.125rem;    /* 50px */
    --space-9: 3.75rem;     /* 60px */
  }
}