/* Hallmark · shape: kept · genre: modern-minimal · theme: Vantage (by request) · redesign: restyle
 * hero: kept · nav: kept, the search-led bar restyled with the threat level as a status chip · footer: kept, the wordmark set large over the links · imagery: none, the data is the picture · signature: the owner layouts in Vantage, lime only for exploited, live or the one primary action · vantage: terrain/steel
 * axes: dark/grotesk-sans/chromatic-lime · posture: restrained · contrast: pass · fold: pass · job: open the CVE feed · v2.0.0 */
/* Hallmark · pre-emit critique: P3 H4 E4 S3 R5 V3 · weakest: S, the owner keeps every layout, so the theme speaks through type, colour, rules and frames only */
/*
 * CyberAlert.io design tokens and component classes for the Divi child theme: the Vantage theme
 * (blue-black ground, steel ink, Geologica, hairline corner-tick frames, one lime signal for exploited, live or primary).
 * The --color-* roles are the source of truth; the short names (--bg-*, --fg-*, --acc, --f-*) are the names the
 * plugin's stylesheet and the Divi layouts already use, kept as aliases so every page follows the theme.
 * Enqueued after Divi's stylesheet. Fonts: self-hosted, see fonts.css.
 */

:root {
  color-scheme: dark;

  /* scale (Hallmark scaffold) */
  --space-3xs: 2px; --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 40px; --space-2xl: 64px; --space-3xl: 96px; --space-4xl: 144px;
  --text-2xs: 0.75rem; --text-xs: 0.8125rem; --text-sm: 0.875rem; --text-md: 1rem; --text-body: 1.0625rem; --text-lg: 1.25rem; --text-xl: 1.5625rem; --text-2xl: 1.953rem; --text-3xl: 2.441rem;
  --text-display-s: clamp(2.25rem, 4vw + 0.5rem, 3.75rem); --text-display: clamp(2.75rem, 5vw + 1rem, 5.25rem);
  --text-section: clamp(2rem, 2.5vw + 1rem, 3.5rem); --text-title: clamp(1.25rem, 0.75vw + 0.875rem, 1.625rem); --text-lead: clamp(1.125rem, 0.35vw + 1rem, 1.375rem);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms; --dur-short: 220ms; --dur-long: 420ms;
  --container: 1440px; --gutter: 64px; --gap-columns: 32px; --section-gap-s: 120px; --section-gap: 144px; --section-gap-l: 176px;
  --z-base: 1; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-sticky-nav: 300; --z-modal: 400; --z-toast: 500; --z-tooltip: 600;

  /* Vantage, steel colourway */
  --color-paper: oklch(13.5% 0.012 235); --color-paper-2: oklch(17% 0.014 235); --color-paper-3: oklch(21% 0.016 235); --color-paper-4: oklch(25% 0.016 235);
  --color-ink: oklch(95% 0.006 230); --color-ink-2: oklch(82% 0.012 230); --color-muted: oklch(66% 0.016 230); --color-faint: oklch(62% 0.014 230);
  --color-rule: oklch(27% 0.014 235); --color-rule-2: oklch(34% 0.016 235); --color-rule-soft: oklch(22% 0.014 235);
  --color-field-edge: oklch(50% 0.016 232);
  --color-accent: oklch(89% 0.19 126); --color-accent-hi: oklch(93% 0.17 126); --color-accent-ink: oklch(19% 0.04 126); --color-focus: oklch(89% 0.19 126);
  --color-accent-soft: oklch(89% 0.19 126 / 0.12); --color-accent-line: oklch(89% 0.19 126 / 0.45);
  --point-lo: oklch(42% 0.04 245); --point-mid: oklch(70% 0.04 232); --point-hi: oklch(96% 0.02 215);
  --color-slot: oklch(21% 0.016 235);
  --color-error: oklch(72% 0.15 27); --color-success: oklch(89% 0.19 126);
  --color-logo-plate: oklch(96% 0.006 230);
  --color-scrim: oklch(13.5% 0.012 235 / 0.94);

  /* severity: data colours, kept apart from the lime (low is steel blue, not green) */
  --color-crit: oklch(68% 0.2 25); --color-high: oklch(76% 0.16 52); --color-med: oklch(84% 0.14 82); --color-low: oklch(78% 0.08 225); --color-info: oklch(72% 0.03 235);
  --color-crit-bg: oklch(68% 0.2 25 / 0.14); --color-high-bg: oklch(76% 0.16 52 / 0.14); --color-med-bg: oklch(84% 0.14 82 / 0.14); --color-low-bg: oklch(78% 0.08 225 / 0.14); --color-info-bg: oklch(72% 0.03 235 / 0.14);
  --color-crit-line: oklch(68% 0.2 25 / 0.45);

  --font-display: "Geologica", ui-sans-serif, system-ui, sans-serif; --font-body: "Geologica", ui-sans-serif, system-ui, sans-serif;
  --radius-card: 4px; --radius-pill: 999px; --rule-hair: 1px; --tick: 10px;
  --shadow-card: none;
  --tracking-display: -0.035em; --display-weight: 300;

  /* the names the plugin stylesheet and the layouts use */
  --bg-0: var(--color-paper); --bg-1: var(--color-paper-2); --bg-2: var(--color-paper-3); --bg-3: var(--color-paper-4);
  --border: var(--color-rule); --border-soft: var(--color-rule-soft);
  --fg-0: var(--color-ink); --fg-1: var(--color-ink-2); --fg-2: var(--color-muted); --fg-3: var(--color-faint); --fg-4: var(--color-rule-2);
  --acc: var(--color-accent); --acc-soft: var(--color-accent-soft); --acc-line: var(--color-accent-line); --acc-fg: var(--color-accent-ink);
  --crit: var(--color-crit); --high: var(--color-high); --med: var(--color-med); --low: var(--color-low); --info: var(--color-info);
  --crit-bg: var(--color-crit-bg); --high-bg: var(--color-high-bg); --med-bg: var(--color-med-bg); --low-bg: var(--color-low-bg); --info-bg: var(--color-info-bg);
  --f-sans: var(--font-body); --f-mono: var(--font-body);
}

/* ─── component classes ─── */

/* figures are tabular Geologica; the old monospace class keeps only that */
.mono, .stat-num { font-family: var(--font-body); font-variant-numeric: tabular-nums; }
.stat-num { font-weight: 400; color: var(--color-ink); }

/* a panel: a hairline box, the radius at most 4px */
.ca-card { position: relative; background: transparent; border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); }
.ca-card-h { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-md) var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-rule); }
.ca-card-h h3 { margin: 0; font: 400 var(--text-md)/1.3 var(--font-body); letter-spacing: 0; color: var(--color-ink); }
.ca-card-h .ca-spacer { flex: 1; }

/* a measured thing: hairline frame drawn only at its corners */
.ticks { position: relative; }
.ticks::before { content: ""; position: absolute; inset: 0; pointer-events: none; border: var(--rule-hair) solid var(--color-rule-2); -webkit-mask: conic-gradient(at var(--tick) var(--tick), transparent 75%, var(--color-ink) 0) 0 0 / calc(100% - var(--tick)) calc(100% - var(--tick)); mask: conic-gradient(at var(--tick) var(--tick), transparent 75%, var(--color-ink) 0) 0 0 / calc(100% - var(--tick)) calc(100% - var(--tick)); }

/* a live state: one small lime dot, still */
.ca-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent); }

/* severity chips: the score in its colour, sentence case */
.sev { display: inline-flex; align-items: center; gap: var(--space-2xs); padding: var(--space-3xs) var(--space-xs); font: 400 var(--text-xs)/1.3 var(--font-body); font-variant-numeric: tabular-nums; letter-spacing: 0; text-transform: none; border: var(--rule-hair) solid currentColor; border-radius: var(--radius-card); }
.sev.crit { color: var(--color-crit); background: var(--color-crit-bg); }
.sev.high { color: var(--color-high); background: var(--color-high-bg); }
.sev.med  { color: var(--color-med);  background: var(--color-med-bg); }
.sev.low  { color: var(--color-low);  background: var(--color-low-bg); }
.sev.info { color: var(--color-info); background: var(--color-info-bg); }

/* labels, captions, meta: the body face a step smaller, sentence case, untracked */
.label { font: 400 var(--text-sm)/1.4 var(--font-body); letter-spacing: 0; text-transform: none; color: var(--color-muted); }

/* controls: lime pill for the one primary action, hairline pill for the rest */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 44px; padding: 0 var(--space-lg); font: 400 var(--text-md)/1 var(--font-body); white-space: nowrap; color: var(--color-ink); background: transparent; border: 0; border-radius: var(--radius-pill); box-shadow: inset 0 0 0 var(--rule-hair) var(--color-rule-2); cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn:hover { background: var(--color-paper-3); box-shadow: inset 0 0 0 var(--rule-hair) var(--color-field-edge); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn.primary { color: var(--color-accent-ink); background: var(--color-accent); box-shadow: none; }
.btn.primary:hover { background: var(--color-accent-hi); }
.btn.ghost { box-shadow: none; }
.btn.ghost:hover { background: var(--color-paper-3); }

/* a choice between a few: segmented, the active one on paper-3 */
.tabs { display: flex; gap: var(--space-3xs); }
.tab { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 36px; padding: 0 var(--space-md); font: 400 var(--text-sm)/1 var(--font-body); color: var(--color-muted); white-space: nowrap; background: transparent; border: var(--rule-hair) solid transparent; border-radius: var(--radius-pill); cursor: pointer; transition: color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out); }
.tab:hover { color: var(--color-ink); }
.tab:active { transform: translateY(1px); }
.tab:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.tab.active { color: var(--color-ink); background: var(--color-paper-3); border-color: var(--color-rule-2); }

/* a tag */
.chip { display: inline-flex; align-items: center; gap: var(--space-2xs); padding: var(--space-3xs) var(--space-sm); font: 400 var(--text-xs)/1.4 var(--font-body); color: var(--color-ink-2); background: transparent; border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--radius-pill); }

/* a link set in text */
.lnk { color: var(--color-ink); font-size: var(--text-sm); text-decoration: underline; text-decoration-color: var(--color-rule-2); text-decoration-thickness: 1px; text-underline-offset: 0.2em; transition: text-decoration-color var(--dur-short) var(--ease-out); }
.lnk:hover { color: var(--color-ink); text-decoration-color: var(--color-accent); }
.lnk:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* ─── Divi buttons and fields ─── */
.et_pb_button.ca-btn-primary, .et_pb_button.ca-btn,
body .et_pb_contact_submit.et_pb_button { display: inline-block !important; padding: var(--space-sm) var(--space-lg) !important; font: 400 var(--text-md)/24px var(--font-body) !important; text-align: center; letter-spacing: 0 !important; white-space: nowrap; border: 0 !important; border-radius: var(--radius-pill) !important; transition: background-color var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out) !important; }
.et_pb_button.ca-btn-primary, body .et_pb_contact_submit.et_pb_button { color: var(--color-accent-ink) !important; background: var(--color-accent) !important; }
.et_pb_button.ca-btn-primary:hover, body .et_pb_contact_submit.et_pb_button:hover { color: var(--color-accent-ink) !important; background: var(--color-accent-hi) !important; }
.et_pb_button.ca-btn { color: var(--color-ink) !important; background: transparent !important; box-shadow: inset 0 0 0 var(--rule-hair) var(--color-rule-2); }
.et_pb_button.ca-btn:hover { color: var(--color-ink) !important; background: var(--color-paper-3) !important; box-shadow: inset 0 0 0 var(--rule-hair) var(--color-field-edge); }
.et_pb_button.ca-btn-primary:active, .et_pb_button.ca-btn:active, body .et_pb_contact_submit.et_pb_button:active { transform: translateY(1px); }
.et_pb_button.ca-btn-primary:focus-visible, .et_pb_button.ca-btn:focus-visible, body .et_pb_contact_submit.et_pb_button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.et_pb_button.ca-btn-primary::after, .et_pb_button.ca-btn::after, body .et_pb_contact_submit.et_pb_button::after { display: none !important; }
.ca-input input, .ca-input textarea, .ca-input select { min-height: 48px; padding: var(--space-sm) var(--space-md) !important; font: 300 var(--text-md)/1.4 var(--font-body) !important; color: var(--color-ink) !important; caret-color: var(--color-accent); background: var(--color-paper-2) !important; border: var(--rule-hair) solid var(--color-field-edge) !important; border-radius: var(--radius-card) !important; outline: 2px solid transparent; outline-offset: -1px; }
.ca-input input:focus, .ca-input textarea:focus, .ca-input select:focus { outline-color: var(--color-focus); }

@media (prefers-reduced-motion: reduce) {
  .btn, .tab, .lnk, .et_pb_button.ca-btn-primary, .et_pb_button.ca-btn, body .et_pb_contact_submit.et_pb_button { transition: none !important; }
  .btn:active, .tab:active, .et_pb_button.ca-btn-primary:active, .et_pb_button.ca-btn:active { transform: none; }
}