/* Ironledge Carriers design tokens. Proposed 2026-10-19 by ATP Consulting.
   Every page of ironledgecarriers.com reads its colour, type, spacing and motion from here.
   Idea: a carrier you can put weight on. Iron and steel greys, New Hampshire granite, one red signal line.
   Contrast figures are WCAG 2.x ratios, measured. AA: 4.5 body text, 3.0 large type and UI parts. */

@font-face { font-family: "Barlow Condensed"; src: url("fonts/BarlowCondensed-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("fonts/BarlowCondensed-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("fonts/BarlowCondensed-ExtraBold.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("fonts/Barlow-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("fonts/Barlow-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("fonts/Barlow-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  /* ---- Palette (primitives). Use the semantic tokens below in components, not these. ---- */
  color-scheme: light;
  --il-iron: #1B1F22;        /* primary. The rig and the steel. */
  --il-steel: #2E3439;       /* raised dark surface */
  --il-granite: #62676B;     /* secondary. New Hampshire ledge. Muted text on light (5.72 on white) */
  --il-granite-400: #8C9093; /* input borders on light (3.22), muted text on iron only (5.16) */
  --il-granite-300: #B9BBB8; /* hairlines on light; muted text on dark (8.58 iron, 6.52 steel) */
  --il-ledge: #E9E7E2;       /* alternate light band */
  --il-paper: #F6F5F2;       /* light page ground */
  --il-white: #FFFFFF;
  --il-signal-300: #F58372;  /* accent text on dark (6.61 iron, 5.02 steel) */
  --il-signal-500: #E0402E;  /* THE signal: the mark's red line, graphics, focus ring. Never body text */
  --il-signal-600: #C4291C;  /* accent text and button fill on light (white label 5.70) */
  --il-signal-700: #A82316;  /* button hover (white label 7.20) */
  --il-success: #2E7A4C;     /* 5.24 on white */
  --il-success-300: #6CC495; /* on dark, 7.88 iron */
  --il-warning: #946000;     /* 5.34 on white */
  --il-warning-300: #E8B04A; /* on dark, 8.49 iron */

  /* ---- Semantic colour, light theme ---- */
  --color-bg: var(--il-paper);
  --color-bg-alt: var(--il-ledge);
  --color-surface: var(--il-white);
  --color-ink: var(--il-iron);            /* 15.22 on paper */
  --color-ink-muted: var(--il-granite);   /* 5.25 on paper, 4.63 on ledge */
  --color-line: var(--il-granite-300);    /* decorative hairline */
  --color-field-border: var(--il-granite-400); /* 3.22 on white, UI part */
  --color-accent: var(--il-signal-500);   /* graphic only */
  --color-accent-ink: var(--il-signal-600);
  --color-button: var(--il-signal-600);
  --color-button-hover: var(--il-signal-700);
  --color-on-button: var(--il-white);
  --color-button-2: var(--il-iron);       /* secondary action: a filled object, never a ghost */
  --color-button-2-hover: var(--il-steel);
  --color-on-button-2: var(--il-white);
  --color-focus: var(--il-signal-500);    /* 3.90 on paper and on iron */
  --color-success: var(--il-success);
  --color-warning: var(--il-warning);
  --color-danger: var(--il-signal-600);

  /* ---- Film: anything over the hero picture. FIXED, never follows the theme. ---- */
  --film-ground: var(--il-iron);
  --film-ink: var(--il-white);            /* 16.59 */
  --film-ink-muted: var(--il-granite-300);/* 8.58 */
  --film-accent: var(--il-signal-500);
  --film-accent-ink: var(--il-signal-300);

  /* ---- Type. Display: Barlow Condensed (drawn from highway sign lettering). Body: Barlow. ---- */
  --font-display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --font-body: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --text-xs: 0.8125rem;   /* 13 labels, legal */
  --text-sm: 0.9375rem;   /* 15 captions, form help */
  --text-base: 1.0625rem; /* 17 body */
  --text-lg: 1.25rem;     /* 20 lead */
  --text-xl: 1.5rem;      /* 24 card titles */
  --text-2xl: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);   /* 28 to 40 section titles */
  --text-3xl: clamp(2.25rem, 1.6rem + 2.6vw, 3.75rem);  /* 36 to 60 band statements */
  --text-display: clamp(3rem, 1.6rem + 6vw, 7rem);      /* 48 to 112 hero */
  --leading-tight: 0.95;
  --leading-snug: 1.2;
  --leading-body: 1.55;
  --track-caps: 0.14em;   /* small caps labels */
  --track-display: 0.005em;
  --weight-body: 400;
  --weight-medium: 500;
  --weight-strong: 600;
  --weight-display: 800;

  /* ---- Space: 4 px 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-pad: clamp(4rem, 2.5rem + 6vw, 9rem);
  --container: 75rem;  /* 1200 */
  --gutter: clamp(1.25rem, 0.5rem + 3vw, 3rem);

  /* ---- Shape: machined, small radii. No pills. ---- */
  --radius-sm: 2px;
  --radius: 4px;
  --radius-lg: 8px;

  /* ---- Depth ---- */
  --shadow-1: 0 1px 2px rgb(27 31 34 / 0.08);
  --shadow-2: 0 1px 2px rgb(27 31 34 / 0.06), 0 10px 30px rgb(27 31 34 / 0.10);
  --shadow-3: 0 2px 4px rgb(27 31 34 / 0.08), 0 24px 60px rgb(27 31 34 / 0.18);

  /* ---- Controls ---- */
  --control-h: 2.75rem;     /* 44, the touch floor */
  --button-h: 2.5rem;       /* 40 paint; small by default */
  --focus-ring: 0 0 0 3px var(--color-focus);

  /* ---- Motion: slow and steady. Reduced motion turns it off. ---- */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast: 160ms;
  --dur-reveal: 800ms;
  --drift-slow: 90s;
  --drift-mid: 60s;
  --drift-fast: 40s;
}

/* ---- Dark theme: explicit choice, or the system's when no choice is made ---- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: var(--il-iron);
  --color-bg-alt: #22272B;
  --color-surface: var(--il-steel);
  --color-ink: var(--il-white);            /* 16.59 iron, 12.60 steel */
  --color-ink-muted: var(--il-granite-300);/* 8.58 iron, 6.52 steel */
  --color-line: #3E454B;
  --color-field-border: var(--il-granite-400); /* 3.92 on steel */
  --color-accent-ink: var(--il-signal-300);
  --color-button-2: var(--il-white);
  --color-button-2-hover: var(--il-ledge);
  --color-on-button-2: var(--il-iron);
  --color-success: var(--il-success-300);
  --color-warning: var(--il-warning-300);
  --color-danger: var(--il-signal-300);
  --shadow-1: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow-2: 0 1px 2px rgb(0 0 0 / 0.3), 0 10px 30px rgb(0 0 0 / 0.35);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-bg: var(--il-iron);
    --color-bg-alt: #22272B;
    --color-surface: var(--il-steel);
    --color-ink: var(--il-white);
    --color-ink-muted: var(--il-granite-300);
    --color-line: #3E454B;
    --color-field-border: var(--il-granite-400);
    --color-accent-ink: var(--il-signal-300);
    --color-button-2: var(--il-white);
    --color-button-2-hover: var(--il-ledge);
    --color-on-button-2: var(--il-iron);
    --color-success: var(--il-success-300);
    --color-warning: var(--il-warning-300);
    --color-danger: var(--il-signal-300);
    --shadow-1: 0 1px 2px rgb(0 0 0 / 0.4);
    --shadow-2: 0 1px 2px rgb(0 0 0 / 0.3), 0 10px 30px rgb(0 0 0 / 0.35);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-reveal: 0ms; }
}