/*
 * RealSimpleSecurity — design tokens (CSS custom properties)
 * Generated from tokens.json — edit that file first, then mirror changes here.
 * Framework-agnostic: plain CSS custom properties, no build step required.
 *
 * Usage: <link rel="stylesheet" href="/brand-kit/tokens/tokens.css">
 * Fonts referenced below assume /brand-kit/fonts/ is served at that path;
 * adjust url() roots if you relocate the folder during site implementation.
 */

/* ---------------------------------------------------------------------- */
/* Fonts — self-hosted, no third-party font CDN call                      */
/* ---------------------------------------------------------------------- */
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/space-grotesk/space-grotesk-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/space-grotesk/space-grotesk-latin-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/inter/inter-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/inter/inter-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/inter/inter-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/inter/inter-latin-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/jetbrains-mono/jetbrains-mono-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/jetbrains-mono/jetbrains-mono-latin-500-normal.woff2") format("woff2");
}

/* ---------------------------------------------------------------------- */
/* Raw color scale                                                        */
/* ---------------------------------------------------------------------- */
:root {
  --ink-950:#0B0F13; --ink-900:#12171D; --ink-800:#1C242C; --ink-700:#2B3641;
  --ink-600:#425160; --ink-500:#5E7080; --ink-400:#8698A6; --ink-300:#B2C0CA;
  --ink-200:#D6DEE4; --ink-100:#E9EEF1; --ink-50:#F4F6F8;

  --paper:#FAF8F3; --paper-raised:#FFFFFF;

  --gold-800:#7A5206; --gold-700:#8F6108; --gold-600:#A6740D; --gold-500:#C68F1A;
  --gold-400:#D9A83F; --gold-100:#F5E6C4; --gold-50:#FBF3E1;

  --sev-info:#1D5FBF;     --sev-info-dark:#5B9CF0;
  --sev-low:#1B7A5C;      --sev-low-dark:#4FC79A;
  --sev-medium:#8A5A08;   --sev-medium-dark:#E2A53D;
  --sev-high:#A0430A;     --sev-high-dark:#EF8248;
  --sev-critical:#B0281F; --sev-critical-dark:#F0665C;
  --sev-resolved:#146B45; --sev-resolved-dark:#4FCB8C;

  /* ---- Semantic aliases (use these in components; theme-aware) -------- */
  --color-bg: var(--paper);
  --color-surface: var(--paper-raised);
  --color-text: var(--ink-900);
  --color-text-secondary: var(--ink-500);
  --color-border: var(--ink-200);
  --color-accent: var(--gold-600);
  --color-accent-text: var(--gold-700);      /* AA on paper: 5.1:1 */
  --color-accent-contrast: var(--ink-950);   /* text ON a gold-600 fill: 4.7:1 */
  --color-link: var(--gold-700);
  --color-link-hover: var(--gold-800);

  /* ---- Typography ------------------------------------------------------ */
  --font-display: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;

  --text-xs: 0.75rem;    --leading-xs: 1.4;
  --text-sm: 0.875rem;   --leading-sm: 1.45;
  --text-base: 1rem;     --leading-base: 1.6;
  --text-md: 1.125rem;   --leading-md: 1.6;
  --text-lg: 1.25rem;    --leading-lg: 1.4;
  --text-xl: 1.5rem;     --leading-xl: 1.3;
  --text-2xl: 1.875rem;  --leading-2xl: 1.25;
  --text-3xl: 2.375rem;  --leading-3xl: 1.15;
  --text-4xl: 3rem;      --leading-4xl: 1.1;
  --text-5xl: 3.75rem;   --leading-5xl: 1.05;

  --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700;

  /* ---- Spacing (4px base grid) ------------------------------------------ */
  --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;

  /* ---- Radius / shadow / border ----------------------------------------- */
  --radius-sm:4px; --radius-md:8px; --radius-lg:12px; --radius-pill:999px;
  --shadow-sm: 0 1px 2px rgba(11,15,19,0.06), 0 1px 1px rgba(11,15,19,0.04);
  --shadow-md: 0 4px 10px rgba(11,15,19,0.08), 0 2px 4px rgba(11,15,19,0.05);
  --shadow-lg: 0 12px 28px rgba(11,15,19,0.12), 0 4px 8px rgba(11,15,19,0.06);
  --border-width: 1px;
}

/* ---------------------------------------------------------------------- */
/* Dark theme — via OS preference, or an explicit [data-theme="dark"]     */
/* on <html>/<body> for a user-facing toggle                              */
/* ---------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: var(--ink-950);
    --color-surface: #161D24;
    --color-text: var(--ink-100);
    --color-text-secondary: var(--ink-300);
    --color-border: #546678;
    --color-accent: var(--gold-400);
    --color-accent-text: var(--gold-400);
    --color-accent-contrast: var(--ink-950);
    --color-link: var(--gold-400);
    --color-link-hover: var(--gold-100);

    --sev-info: var(--sev-info-dark); --sev-low: var(--sev-low-dark);
    --sev-medium: var(--sev-medium-dark); --sev-high: var(--sev-high-dark);
    --sev-critical: var(--sev-critical-dark); --sev-resolved: var(--sev-resolved-dark);
  }
}
:root[data-theme="dark"] {
  --color-bg: var(--ink-950);
  --color-surface: #161D24;
  --color-text: var(--ink-100);
  --color-text-secondary: var(--ink-300);
  --color-border: #546678;
  --color-accent: var(--gold-400);
  --color-accent-text: var(--gold-400);
  --color-accent-contrast: var(--ink-950);
  --color-link: var(--gold-400);
  --color-link-hover: var(--gold-100);

  --sev-info: var(--sev-info-dark); --sev-low: var(--sev-low-dark);
  --sev-medium: var(--sev-medium-dark); --sev-high: var(--sev-high-dark);
  --sev-critical: var(--sev-critical-dark); --sev-resolved: var(--sev-resolved-dark);
}

body {
  background: var(--color-bg);
  color: var(--color-text);
}

/* ---------------------------------------------------------------------- */
/* A minimal, representative component layer — enough to prove the tokens */
/* out; the site implementation should extend these, not fight them.      */
/* ---------------------------------------------------------------------- */

.rss-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 3px var(--space-2);
  border-radius: var(--radius-pill);
  line-height: 1.4;
}
.rss-badge__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }

.rss-badge--info     { color: var(--sev-info);     background: color-mix(in srgb, var(--sev-info) 12%, transparent); }
.rss-badge--low      { color: var(--sev-low);      background: color-mix(in srgb, var(--sev-low) 12%, transparent); }
.rss-badge--medium   { color: var(--sev-medium);   background: color-mix(in srgb, var(--sev-medium) 12%, transparent); }
.rss-badge--high     { color: var(--sev-high);     background: color-mix(in srgb, var(--sev-high) 12%, transparent); }
.rss-badge--critical { color: var(--sev-critical); background: color-mix(in srgb, var(--sev-critical) 12%, transparent); }
.rss-badge--resolved { color: var(--sev-resolved); background: color-mix(in srgb, var(--sev-resolved) 12%, transparent); }

.rss-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
}
.rss-tag svg { width: 14px; height: 14px; }

.rss-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  border-radius: var(--radius-md);
  padding: 10px 18px;
  border: var(--border-width) solid transparent;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}
.rss-btn--primary { background: var(--color-accent); color: var(--color-accent-contrast); }
.rss-btn--primary:hover { background: var(--gold-500); }
.rss-btn--secondary { background: transparent; color: var(--color-text); border-color: var(--color-border); }
.rss-btn--secondary:hover { border-color: var(--color-text-secondary); }

.rss-card {
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
}

code, .rss-mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}