/*!
 * AGFOCERT Design System — compiled tokens & foundations
 * Navy + red institutional system. Generated from tokens/*.css.
 */
@import url('https://fonts.googleapis.com/css2?family=Libre+Franklin:wght@400;500;600;700;800&family=Source+Sans+3:ital,wght@0,400;0,500;0,600;0,700;1,400&family=IBM+Plex+Mono:wght@400;500;600&display=swap');


/* ===== tokens/colors.css ===== */
/* ============================================================
   AGFOCERT — Color tokens
   Primary: deep institutional NAVY (trust, authority)
   Accent:  AGFO RED (#BA1E1D) — sampled from the brand checkmark
   Neutrals: cool slate INK
   Status:  certification lifecycle (valid/pending/suspended/expired)
   ============================================================ */
:root {
  /* ---- Navy (primary brand) ---- */
  --navy-50:  #f3f7fb;
  --navy-100: #e5edf4;
  --navy-200: #c2d5e5;
  --navy-300: #8aabc9;
  --navy-400: #4a7fb0;
  --navy-500: #235c92;
  --navy-600: #1a4a77;
  --navy-700: #123759;
  --navy-800: #0e2a47;   /* PRIMARY — headers, footers, buttons */
  --navy-900: #0a1f38;
  --navy-950: #07172a;   /* deepest — footer, top-bar */

  /* ---- Red (accent — sampled from the logo tick) ---- */
  --red-50:  #fdf3f2;
  --red-100: #fbe7e6;
  --red-200: #f4c4c2;
  --red-300: #e88a87;
  --red-400: #d03a36;
  --red-500: #ba1e1d;   /* ACCENT — high-emphasis CTAs, tick-rule */
  --red-600: #a81a19;
  --red-700: #8e1715;
  --red-800: #6f1211;

  /* ---- Ink (cool slate neutrals) ---- */
  --ink-50:  #f5f7fa;
  --ink-100: #e8ecf1;
  --ink-200: #d5dce4;
  --ink-300: #aeb9c5;
  --ink-400: #8492a2;
  --ink-500: #5f7184;
  --ink-600: #45566a;
  --ink-700: #2c3a48;
  --ink-800: #1b2733;
  --ink-900: #0f1722;

  /* ---- Green (valid / certified) ---- */
  --green-50:  #e8f4ed;
  --green-100: #cde8d8;
  --green-500: #1e7a46;
  --green-600: #176239;
  --green-700: #11512f;

  /* ---- Amber (pending / warning) ---- */
  --amber-50:  #fbf3e0;
  --amber-100: #f5e2b0;
  --amber-500: #c08401;
  --amber-600: #9a6a02;
  --amber-700: #7c5602;

  /* ============================================================
     Semantic aliases — reference these in components
     ============================================================ */
  /* Surfaces */
  --color-bg:            var(--ink-50);
  --color-surface:       #ffffff;
  --color-surface-subtle:var(--ink-50);
  --color-surface-tint:  var(--navy-50);   /* icon chips, soft fills */
  --color-surface-brand: var(--navy-800);  /* navy section bands */
  --color-surface-brand-deep: var(--navy-950); /* deepest navy bands */

  /* Text */
  --color-text:          var(--ink-800);
  --color-text-muted:    var(--ink-600);
  --color-text-subtle:   var(--ink-500);
  --color-text-on-brand: #cad9e8;          /* body text on navy */
  --color-text-link:     var(--navy-600);
  --color-text-link-hover: var(--navy-700);

  /* Borders */
  --color-border:        var(--ink-200);
  --color-border-strong: var(--ink-300);

  /* Primary action (navy) */
  --color-primary:        var(--navy-800);
  --color-primary-hover:  var(--navy-700);
  --color-primary-active: var(--navy-900);
  --color-on-primary:     #ffffff;

  /* Accent action (red) — sparing, one red moment per view */
  --color-accent:        var(--red-500);
  --color-accent-hover:  var(--red-600);
  --color-accent-active: var(--red-700);
  --color-on-accent:     #ffffff;

  /* Certification-lifecycle status */
  --color-valid:        #1e7a46;
  --color-valid-soft:   var(--green-50);
  --color-pending:      #c08401;
  --color-pending-soft: var(--amber-50);
  --color-suspended:    var(--red-500);
  --color-suspended-soft: var(--red-50);
  --color-expired:      var(--ink-400);
  --color-expired-soft: var(--ink-100);
}

/* ===== tokens/typography.css ===== */
/* ============================================================
   AGFOCERT — Typography tokens
   Humanist & professional: Libre Franklin + Source Sans 3.
   ============================================================ */
:root {
  /* Families */
  --font-display: 'Libre Franklin', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-body:    'Source Sans 3', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* Weights */
  --fw-regular:  400;  /* @kind font */
  --fw-medium:   500;  /* @kind font */
  --fw-semibold: 600;  /* @kind font */
  --fw-bold:     700;  /* @kind font */
  --fw-extrabold:800;  /* @kind font */

  /* Primitive sizes (UI / body) */
  --text-xs:   0.8125rem;  /* 13 — meta, mono labels */
  --text-sm:   0.9375rem;  /* 15 — small, secondary */
  --text-body: 1.0625rem;  /* 17 — base body */
  --text-lead: 1.1875rem;  /* 19 — lead paragraph */

  /* Heading scale (fluid) */
  --text-h4:      clamp(1.1rem, 1.6vw, 1.25rem);    /* ~18-20 — card titles */
  --text-h3:      clamp(1.35rem, 2.4vw, 1.5rem);    /* ~23 */
  --text-h2:      clamp(1.75rem, 3.4vw, 2.05rem);   /* ~30 */
  --text-h1:      clamp(2.1rem, 4.6vw, 2.65rem);    /* ~38 */
  --text-display: clamp(2.6rem, 6vw, 3.6rem);       /* ~48-58 */

  /* Letter spacing */
  --ls-tighter: -0.03em;   /* @kind font */
  --ls-tight:   -0.015em;  /* @kind font */
  --ls-normal:  0;         /* @kind font */
  --ls-wide:    0.04em;    /* @kind font */
  --ls-eyebrow: 0.12em;    /* @kind font */

  /* Line heights */
  --leading-tight:   1.1;   /* @kind font */
  --leading-snug:    1.3;   /* @kind font */
  --leading-normal:  1.55;  /* @kind font */
  --leading-relaxed: 1.65;  /* @kind font */
}

/* ===== tokens/spacing.css ===== */
/* ============================================================
   AGFOCERT — Spacing & layout tokens
   4px base grid: --space-N == N × 4px
   ============================================================ */
:root {
  --space-0:  0;
  --space-1:  0.25rem;  /* 4 */
  --space-2:  0.5rem;   /* 8 */
  --space-3:  0.75rem;  /* 12 */
  --space-4:  1rem;     /* 16 */
  --space-5:  1.25rem;  /* 20 */
  --space-6:  1.5rem;   /* 24 */
  --space-7:  1.75rem;  /* 28 */
  --space-8:  2rem;     /* 32 */
  --space-9:  2.25rem;  /* 36 */
  --space-10: 2.5rem;   /* 40 */
  --space-11: 2.75rem;  /* 44 */
  --space-12: 3rem;     /* 48 */
  --space-14: 3.5rem;   /* 56 */
  --space-16: 4rem;     /* 64 */
  --space-20: 5rem;     /* 80 */
  --space-24: 6rem;     /* 96 */

  /* Layout */
  --container-max:  1200px;  /* @kind spacing */
  --container-prose: 720px;  /* @kind spacing */
}

/* ===== tokens/radius.css ===== */
/* ============================================================
   AGFOCERT — Radius tokens
   Institutional = restrained, mostly crisp corners.
   ============================================================ */
:root {
  --radius-none: 0;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;   /* default — inputs, buttons */
  --radius-lg: 10px;  /* cards */
  --radius-xl: 16px;  /* feature panels */
  --radius-2xl: 24px;
  --radius-pill: 999px;
}

/* ===== tokens/elevation.css ===== */
/* ============================================================
   AGFOCERT — Elevation (shadows) + motion tokens
   Restrained, crisp shadows over a cool navy-tinted base.
   ============================================================ */
:root {
  /* Shadows — tuned with a slight navy tint, not pure black */
  --shadow-xs: 0 1px 2px rgba(14, 42, 71, 0.06);
  --shadow-sm: 0 1px 3px rgba(14, 42, 71, 0.08), 0 1px 2px rgba(14, 42, 71, 0.06);
  --shadow-md: 0 4px 12px rgba(14, 42, 71, 0.08), 0 2px 4px rgba(14, 42, 71, 0.05);
  --shadow-lg: 0 12px 28px rgba(14, 42, 71, 0.12), 0 4px 8px rgba(14, 42, 71, 0.06);
  --shadow-xl: 0 24px 56px rgba(10, 31, 56, 0.18), 0 8px 16px rgba(10, 31, 56, 0.08);
  --shadow-focus: 0 0 0 3px rgba(35, 92, 146, 0.35);
  --shadow-focus-accent: 0 0 0 3px rgba(186, 30, 29, 0.30);

  /* Borders width */
  --border-hairline: 1px;
  --border-thick: 2px;

  /* Motion — institutional: quick, no bounce */
  --ease-standard: cubic-bezier(0.2, 0, 0.1, 1);  /* @kind other */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);      /* @kind other */
  --dur-fast: 120ms;   /* @kind other */
  --dur-base: 200ms;   /* @kind other */
  --dur-slow: 320ms;   /* @kind other */
}

/* ===== tokens/base.css ===== */
/* ============================================================
   AGFOCERT — base element defaults & shared utilities
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--color-text);
  line-height: var(--leading-tight);
  letter-spacing: var(--ls-tight);
  margin: 0;
  text-wrap: balance;
}
h1 { font-weight: var(--fw-extrabold); }
h2 { font-weight: var(--fw-bold); }
h3 { font-weight: var(--fw-bold); }

p { margin: 0; text-wrap: pretty; }

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

code, kbd, samp { font-family: var(--font-mono); }

::selection { background: var(--navy-200); color: var(--navy-900); }

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

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

/* ============================================================
   Layout helpers used across UI kits
   ============================================================ */

/* Centered page container */
.agfo-container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 48px);
}

/* Eyebrow device — red tick-rule + uppercase tracked label.
   A direct echo of the logo's red divider. */
.agfo-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--text-xs);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-primary);
}
.agfo-eyebrow::before {
  content: "";
  width: 26px;
  height: 3px;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
}

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