/* DSA Systems — design tokens (flattened, self-contained).
   Generated from the DSA design system for coding-agent consumption.
   Link this one file; fonts + base element styles are included. */

/* ===== tokens/fonts.css ===== */
/* DSA Systems — Webfonts
   Primary typeface: Roboto (variable, wght 100–900) — per CI Guidelines the primary
   DSA typeface for print & digital.
   Display typeface: Sertig — user-supplied stand-in for "Big John Pro" (the CI's
   secondary display face used for headlines/slogans). See readme.md → Typography.
*/

@font-face {
  font-family: "Roboto";
  src: url("./assets/fonts/Roboto-Variable.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-stretch: 75% 125%;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Roboto";
  src: url("./assets/fonts/Roboto-Italic-Variable.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-stretch: 75% 125%;
  font-style: italic;
  font-display: swap;
}

/* Calibri — the CI's interim PowerPoint face. It is a system-installed font (no
   webfont binary to ship), so it is declared via local() only. This satisfies the
   font-face requirement while resolving to the user's installed Calibri; the sans
   fallback stack renders on machines without it. */
@font-face {
  font-family: "Calibri";
  src: local("Calibri"), local("Carlito");
  font-weight: 400 700;
  font-style: normal;
}

@font-face {
  font-family: "Sertig";
  src: url("./assets/fonts/Sertig.otf") format("opentype");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* ===== tokens/colors.css ===== */
/* DSA Systems — Colour tokens
   Source: DSA Corporate Design Guidelines v1.4 (Colour Scheme section).
   Base values are the exact hex from the CI manual; semantic aliases sit on top.
*/

:root {
  /* ---- Primary brand colour (DSA Blue) ---- */
  --dsa-blue: #2e75bf;        /* RAL 5015 · Pantone 3005 C · HKS 42 N — THE brand colour */
  --dsa-blue-light: #6aa3f2;  /* Pantone 284 C */
  --dsa-blue-dark: #004a8e;   /* Pantone 301 C */

  /* ---- Neutrals (Grey 1 = darkest → Grey 5 = lightest) ---- */
  --white: #ffffff;
  --grey-5: #f6f6f6;  /* lightest — table header bg, surfaces */
  --grey-4: #dfdfdf;  /* hairline borders, dividers */
  --grey-3: #c9c9c9;  /* disabled, muted lines */
  --grey-2: #474747;  /* body text, personal details, e-mail signature colour */
  --grey-1: #292929;  /* headings, near-black */
  --black: #000000;

  /* ---- Secondary palette (decoration & accentuation ONLY — never the main colour) ----
     Each family: main / light / dark. Light tints pair best with DSA Blue. */
  --cyan: #48b8e5;        --cyan-light: #77d3f8;    --cyan-dark: #1f566b;
  --green: #95d41f;       --green-light: #c9f070;   --green-dark: #0a7d4b;
  --green-mid: #87b817;
  --purple: #714b94;      --purple-light: #a178c5;  --purple-dark: #432166;
  --orange: #ffad50;      --orange-light: #f5ad63;  --orange-dark: #b44f00;
  --orange-mid: #ed7d1d;  --orange-deep: #d64e0f;
  --yellow: #f8c814;      --yellow-light: #fadc5a;  --yellow-dark: #d89800;
  --red: #ef4136;         --red-light: #ff7661;     --red-dark: #b5000d;
  --magenta: #e4257e;     --magenta-light: #ff64ad; --magenta-dark: #ac0052;
  --magenta-deep: #c81464;

  /* ---- Eyecatcher / callout default (from News-Pic & Rollup templates) ---- */
  --eyecatcher: #e4257e;

  /* ---- Semantic aliases ---- */
  --text-heading: var(--grey-1);
  --text-body: var(--grey-2);
  --text-muted: #6f6f6f;
  --text-inverse: var(--white);
  --text-link: var(--dsa-blue);
  --text-link-hover: var(--dsa-blue-dark);

  --surface-page: var(--white);
  --surface-subtle: var(--grey-5);
  --surface-card: var(--white);
  --surface-inverse: var(--grey-1);
  --surface-brand: var(--dsa-blue);

  --border-subtle: var(--grey-4);
  --border-default: var(--grey-3);
  --border-strong: var(--grey-2);
  --border-focus: var(--dsa-blue);

  /* Status — mapped onto the secondary palette */
  --status-success: var(--green-dark);
  --status-success-surface: #e9f6ee;
  --status-warning: var(--yellow-dark);
  --status-warning-surface: #fdf4d9;
  --status-danger: var(--red);
  --status-danger-surface: #fdeceb;
  --status-info: var(--dsa-blue);
  --status-info-surface: #e9f1fa;
}

/* ===== tokens/typography.css ===== */
/* DSA Systems — Typography tokens
   Primary: Roboto (Light 300 / Regular 400 / Medium 500 / Bold 700 / Black 900).
   Display: Sertig (stand-in for Big John Pro) — headlines, slogans, section titles.
   The CI note: PowerPoint input face is Calibri until Roboto is rolled out everywhere,
   so Calibri sits in the fallback stack for slide contexts.
*/

:root {
  /* Families */
  --font-sans: "Roboto", "Segoe UI", Calibri, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Sertig", "Roboto", "Segoe UI", Arial, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* Weights */
  --fw-light: 300; /* @kind other */
  --fw-regular: 400; /* @kind other */
  --fw-medium: 500; /* @kind other */
  --fw-bold: 700; /* @kind other */
  --fw-black: 900; /* @kind other */

  /* Type scale (rem, 16px base) */
  --fs-display: 4rem;     /* 64px — hero / slide titles (display face) */
  --fs-h1: 2.5rem;        /* 40px */
  --fs-h2: 2rem;          /* 32px */
  --fs-h3: 1.5rem;        /* 24px */
  --fs-h4: 1.25rem;       /* 20px */
  --fs-lg: 1.125rem;      /* 18px */
  --fs-body: 1rem;        /* 16px */
  --fs-sm: 0.875rem;      /* 14px */
  --fs-xs: 0.75rem;       /* 12px — CI minimum print size */

  /* Line heights */
  --lh-tight: 1.1; /* @kind other */
  --lh-heading: 1.2; /* @kind other */
  --lh-snug: 1.4; /* @kind other */
  --lh-body: 1.55; /* @kind other */

  /* Letter spacing — CI specifies 0 tracking for body; display runs slightly tight */
  --ls-display: -0.01em; /* @kind other */
  --ls-normal: 0; /* @kind other */
  --ls-caps: 0.06em; /* @kind other */   /* uppercase labels / eyebrows */
}

/* ===== tokens/spacing.css ===== */
/* DSA Systems — Spacing, radii & layout tokens
   The CI is built on a technical, print-derived grid (9pt baseline, mm borders).
   Translated here to an 8px-based scale for screen work, with the brand's crisp,
   low-radius, engineered feel.
*/

:root {
  /* Spacing scale (8px base, with 4px half-step) */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* Corner radii — DSA reads engineered & precise; radii stay tight.
     (The logo's own rounded-rectangle bracket is the only soft form.) */
  --radius-none: 0;
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-pill: 999px;

  /* Layout */
  --container-max: 1200px; /* @kind other */
  --container-narrow: 760px; /* @kind other */
  --gutter: 24px; /* @kind other */

  /* Hairlines — the CI uses 0.25pt Grey lines on tables; keep borders thin */
  --border-hairline: 1px; /* @kind other */
  --border-medium: 2px; /* @kind other */

  /* The signature eyecatcher tilt from the News-Pic / Rollup templates */
  --eyecatcher-tilt: -6.5deg; /* @kind other */
}

/* ===== tokens/effects.css ===== */
/* DSA Systems — Elevation, focus & motion tokens
   DSA's visual language is flat and technical (print heritage). Shadows are used
   sparingly and softly for screen UI; motion is quick and functional, never bouncy.
*/

:root {
  /* Shadows — subtle, cool-grey tinted, low spread */
  --shadow-xs: 0 1px 2px rgba(41, 41, 41, 0.06);
  --shadow-sm: 0 1px 3px rgba(41, 41, 41, 0.08), 0 1px 2px rgba(41, 41, 41, 0.06);
  --shadow-md: 0 4px 12px rgba(41, 41, 41, 0.10);
  --shadow-lg: 0 12px 28px rgba(41, 41, 41, 0.14);
  --shadow-focus: 0 0 0 3px rgba(46, 117, 191, 0.30); /* DSA-blue focus ring */

  /* Motion — functional, restrained */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1); /* @kind other */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur-base: 180ms; /* @kind other */
  --dur-slow: 260ms; /* @kind other */

  /* Interaction states */
  --state-hover-tint: rgba(0, 0, 0, 0.05);
  --state-press-tint: rgba(0, 0, 0, 0.10);
  --overlay-scrim: rgba(41, 41, 41, 0.55);
}

/* ===== tokens/base.css ===== */
/* DSA Systems — Base element styles & primitives
   Applies the brand's type + colour foundations to raw HTML so any specimen or
   consumer page inherits the DSA look without extra classes.
*/

*,
*::before,
*::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Headings — Roboto Bold/Black by default; opt into the display face with .dsa-display */
h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--space-3);
  color: var(--text-heading);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-normal);
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); font-weight: var(--fw-black); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

p { margin: 0 0 var(--space-4); text-wrap: pretty; }

/* Display face — for hero titles, slogans, section headers */
.dsa-display {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  line-height: var(--lh-tight);
}

/* Uppercase eyebrow / label */
.dsa-eyebrow {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--dsa-blue);
}

a {
  color: var(--text-link);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-standard);
}
a:hover { color: var(--text-link-hover); text-decoration: underline; }

hr {
  border: 0;
  border-top: var(--border-hairline) solid var(--border-subtle);
  margin: var(--space-5) 0;
}

code, pre, kbd { font-family: var(--font-mono); font-size: 0.9em; }

::selection { background: var(--dsa-blue-light); color: var(--grey-1); }

:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-sm);
}

small { font-size: var(--fs-sm); }
strong, b { font-weight: var(--fw-bold); }