/* ════════════════════════════════════════════════════════════════
   VERIDEX Alethia - design tokens + semantic styles
   Source of truth for the design system. Import first in any artifact:
       <link rel="stylesheet" href="colors_and_type.css"/>

   Mirrors the production tokens shipped on veridexalethia.com (assets/
   veridex.css), the Brandbook, and the internal Team Board app.
   Neumorphic ("soft UI") system on a light blue-grey canvas; royal blue
   (#3349b3) is the brand accent (accent === primary). Mint is a sparse
   success/live tone only - NOT a global accent.

   FOUR THEMES (see the THEMES block below): default light · midnight (dark)
   · volt (near-black neon) · alt-light. Set `data-v-theme` to switch.
   ════════════════════════════════════════════════════════════════ */

/* Webfonts - ALL families SELF-HOSTED from /fonts (uploaded brand files).
   No CDN dependency. Font URLs resolve relative to THIS file, so any artifact
   that links colors_and_type.css gets the fonts regardless of its folder depth.
   NOTE: 'Inter Display' is referenced as the display family; the uploaded
   'Inter' variable font is what renders (its display optical size covers it). */

/* ── Inter - variable (opsz + wght), display / UI ── */
@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-VariableFont_opsz_wght.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 100%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-Italic-VariableFont_opsz_wght.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 100%;
  font-style: italic;
  font-display: swap;
}

/* ── Inter Display - same variable file, display optical size (opsz pinned high) ── */
@font-face {
  font-family: 'Inter Display';
  src: url('fonts/Inter-VariableFont_opsz_wght.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 100%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter Display';
  src: url('fonts/Inter-Italic-VariableFont_opsz_wght.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 100%;
  font-style: italic;
  font-display: swap;
}

/* ── DM Sans - variable (opsz + wght), body ── */
@font-face {
  font-family: 'DM Sans';
  src: url('fonts/DMSans-VariableFont_opsz_wght.woff2') format('woff2');
  font-weight: 100 1000;
  font-stretch: 100%;
  font-style: normal;
  font-display: swap;
}

/* ── DM Mono - static weights, mono (hashes, IDs, scores, versions) ── */
@font-face { font-family: 'DM Mono'; src: url('fonts/DMMono-Regular.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; }

:root {
  /* ── COLOR · SURFACES ── */
  --v-bg:        #eef1f6;  /* primary surface - the neumorphic canvas */
  --v-bg2:       #eef1f6;  /* alias for symmetry; same as bg */
  --v-bg3:       #e5eaf2;  /* one-step-darker surface (track / inset bg) */
  --v-bg-deep:   #e4e9f5;  /* gradient stop for featured cards */
  --v-surface:   #ffffff;  /* true white - modals, dropdowns, hero screen */

  /* ── COLOR · BRAND (royal blue) ── */
  --v-primary:        #3349b3;  /* royal blue - buttons, brand, numerals */
  --v-primary-2:      #4359c2;  /* lighter step - gradients, hover */
  --v-primary-deep:   #2a3c9c;  /* darkest stop - footer / cert hero */
  --v-primary-tint:   rgba(51, 73, 179, 0.08);
  --v-primary-tint-2: rgba(51, 73, 179, 0.18);
  --v-lavender:       #a5bff0;  /* light-blue / lavender - logo "check", fills */
  --v-navy:           #1f2d6b;  /* illustration line colour */

  /* ── COLOR · SUCCESS / "LIVE" (mint) ──
     NOTE: mint is NOT a global brand accent. On the live site the brand
     accent equals the primary (--v-accent === --v-primary, royal blue).
     Mint is reserved for success / live ("on") micro-states only, and it is
     also the PRIMARY of the Volt theme (see THEMES below). Use sparingly. */
  --v-accent:        #22d3a0;  /* mint - live dot / success only (legacy alias) */
  --v-success:       #22d3a0;  /* preferred name for the mint success/live tone */
  --v-accent-deep:   #16a37b;  /* on-light text variant */
  --v-accent-tint:   rgba(34, 211, 160, 0.18);
  --v-accent-border: rgba(34, 211, 160, 0.35);

  /* The true brand accent === primary (matches the live site's --accent). */
  --v-brand-accent:  #3349b3;

  /* ── COLOR · TEXT ── */
  --v-text:        #0f172a;
  --v-text-soft:   #475569;
  --v-muted:       #64748b;
  --v-muted-soft:  #94a3b8;

  /* ── COLOR · BORDERS ── */
  --v-border:        rgba(15, 23, 42, 0.08);
  --v-border-strong: rgba(15, 23, 42, 0.12);

  /* ── COLOR · SEMANTIC ── */
  --v-danger:        #dc2626;
  --v-danger-deep:   #be123c;
  --v-danger-tint:   rgba(190, 18, 60, 0.08);
  --v-danger-border: rgba(190, 18, 60, 0.22);

  --v-warn:        #d97706;
  --v-warn-deep:   #b45309;
  --v-warn-tint:   rgba(180, 83, 9, 0.08);
  --v-warn-border: rgba(180, 83, 9, 0.18);

  /* Neumorphic shadow primitives - the two-light-source model */
  --v-shadow-dark:    #d4d9e2;  /* lower-right cast shadow */
  --v-shadow-light:   #ffffff;  /* upper-left highlight */
  --v-shadow-darker:  #d0d5df;  /* hover state - slightly deeper */

  /* ── TYPE ── */
  --v-font-head:  'Inter Display', 'Inter', system-ui, -apple-system, sans-serif;
  --v-font-body:  'DM Sans', system-ui, -apple-system, sans-serif;
  --v-font-mono:  'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ── RADII ── */
  --v-radius-pill:  999px;
  --v-radius-sm:    8px;   /* logo hex, mini chips */
  --v-radius:       12px;  /* default - buttons, inputs, small cards */
  --v-radius-md:    14px;  /* faq item, inline doc row */
  --v-radius-lg:    16px;
  --v-radius-xl:    18px;  /* raised cards (how-card, problem-card) */
  --v-radius-2xl:   22px;  /* hero panels, columns */
  --v-radius-3xl:   28px;  /* cert hero box */

  /* ── ELEVATION (neumorphic shadow tokens) ── */
  --v-elev-raised:    10px 10px 24px var(--v-shadow-dark), -10px -10px 24px var(--v-shadow-light);
  --v-elev-raised-sm: 6px 6px 14px var(--v-shadow-dark), -6px -6px 14px var(--v-shadow-light);
  --v-elev-raised-lg: 14px 14px 30px var(--v-shadow-dark), -14px -14px 30px var(--v-shadow-light);
  --v-elev-hover:     14px 14px 32px var(--v-shadow-darker), -14px -14px 32px var(--v-shadow-light);
  --v-elev-hover-lg:  18px 18px 40px var(--v-shadow-darker), -18px -18px 40px var(--v-shadow-light);
  --v-elev-inset:     inset 6px 6px 12px var(--v-shadow-dark), inset -6px -6px 12px var(--v-shadow-light);
  --v-elev-inset-sm:  inset 4px 4px 10px var(--v-shadow-dark), inset -4px -4px 10px var(--v-shadow-light);
  --v-elev-inset-xs:  inset 3px 3px 8px var(--v-shadow-dark), inset -3px -3px 8px var(--v-shadow-light);

  /* Floating modal / hero screen - drop shadow, not neumorphic */
  --v-elev-float:        0 32px 80px rgba(15, 23, 42, 0.22), 0 0 0 1px var(--v-border);
  --v-elev-button:       0 8px 20px rgba(51, 73, 179, 0.28);
  --v-elev-button-hover: 0 12px 28px rgba(51, 73, 179, 0.38);

  /* ── EASING ── */
  --v-ease:        cubic-bezier(0.22, 1, 0.36, 1);    /* @kind other */ /* default, easeOutQuint-ish */
  --v-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */ /* wave-text overshoot */

  /* ── GRADIENTS ── */
  --v-grad-primary: linear-gradient(135deg, var(--v-primary), var(--v-primary-2));
  --v-grad-deep:    linear-gradient(135deg, var(--v-primary-deep) 0%, var(--v-primary) 50%, var(--v-primary-2) 100%);
  --v-grad-card:    linear-gradient(135deg, #eef1f6 0%, #e4e9f5 100%); /* @kind color */

  /* ── FOCUS GLOW (focus ring / soft brand glow) ── */
  --v-glow: rgba(51, 73, 179, 0.12);

  /* ── FLAT-MODE SURFACE (used by dark themes where neumorphism is off) ── */
  --v-neo-bg: var(--v-bg);
}

/* ════════════════════════════════════════════════════════════════
   THEMES - mirrors the four themes shipped on veridexalethia.com.
   Apply by setting `data-v-theme` on <html> or any container:
       <html data-v-theme="midnight">   …dark "Midnight"
       <html data-v-theme="volt">       …near-black neon "Volt"
       <html data-v-theme="alt-light">  …alternate bright/green-accent light
   Default (no attribute) = the canonical royal-blue light theme above.

   IMPORTANT - neumorphism is a LIGHT-ONLY effect. On the dark themes the
   soft shadows are flat: surfaces become a filled --v-surface plate with a
   1px --v-border hairline (never the paired highlight/shadow). Always give
   dark surfaces a visible border so their edges don't vanish.
   ════════════════════════════════════════════════════════════════ */

/* ── MIDNIGHT (deep navy, periwinkle primary) ── */
[data-v-theme="midnight"] {
  --v-bg:          #07111f;
  --v-bg2:         #0d1728;
  --v-bg3:         #142238;
  --v-bg-deep:     #0d1728;
  --v-surface:     #142238;
  --v-neo-bg:      #142238;
  --v-border:        #223454;
  --v-border-strong: #2c4063;
  --v-primary:      #7287ff;  /* brighter periwinkle */
  --v-primary-2:    #8ca0ff;
  --v-primary-deep: #5a6fe0;
  --v-brand-accent: #7287ff;
  --v-text:        #f5f7ff;
  --v-text-soft:   #c3ccea;
  --v-muted:       #a8b3cc;
  --v-muted-soft:  #7d89a8;
  --v-danger:      #ef4444;
  --v-warn:        #f59e0b;
  --v-glow:        rgba(114, 135, 255, 0.40);
  /* flat: neumorphic shadows collapse to transparent */
  --v-shadow-dark:  transparent;
  --v-shadow-light: transparent;
  --v-shadow-darker: transparent;
  --v-grad-card:    linear-gradient(135deg, #142238 0%, #1a2c47 100%);
}

/* ── VOLT (near-black, neon mint primary, violet accent) ── */
[data-v-theme="volt"] {
  --v-bg:          #060b0f;
  --v-bg2:         #0a1019;
  --v-bg3:         #0d1520;
  --v-bg-deep:     #0a1019;
  --v-surface:     #111d2b;
  --v-neo-bg:      #111d2b;
  --v-border:        rgba(34, 211, 160, 0.12);
  --v-border-strong: rgba(34, 211, 160, 0.28);
  --v-primary:      #22d3a0;  /* mint is the Volt primary */
  --v-primary-2:    #4aefc2;
  --v-primary-deep: #16a37b;
  --v-brand-accent: #7c6bff;  /* violet accent */
  --v-text:        #d4f5ec;
  --v-text-soft:   #9fd8c7;
  --v-muted:       #5a8878;
  --v-muted-soft:  #487063;
  --v-danger:      #ef4444;
  --v-warn:        #f59e0b;
  --v-glow:        rgba(34, 211, 160, 0.20);
  --v-shadow-dark:  transparent;
  --v-shadow-light: transparent;
  --v-shadow-darker: transparent;
  --v-grad-primary: linear-gradient(135deg, #22d3a0, #4aefc2);
  --v-grad-card:    linear-gradient(135deg, #111d2b 0%, #0d1520 100%);
}

/* ── ALT-LIGHT (alternate bright light, violet primary + green accent) ── */
[data-v-theme="alt-light"] {
  --v-bg:          #eef2f8;
  --v-bg2:         #f5f7fb;
  --v-bg3:         #e5eaf3;
  --v-surface:     #ffffff;
  --v-neo-bg:      #eef2f8;
  --v-border:        rgba(0, 0, 0, 0.07);
  --v-border-strong: rgba(0, 0, 0, 0.12);
  --v-primary:      #4a52e8;
  --v-primary-2:    #6b72f0;
  --v-primary-deep: #3a40c8;
  --v-brand-accent: #0fa878;  /* green accent in this theme */
  --v-text:        #111827;
  --v-muted:       #6b7280;
  --v-glow:        rgba(74, 82, 232, 0.15);
}

/* ════════════════════════════════════════════════════════════════
   BASE / SEMANTIC ELEMENT STYLES
   Apply by adding class="v-site" to <body>, or use the specific
   .v-h1 / .v-eyebrow / .v-mono helpers anywhere.
   ════════════════════════════════════════════════════════════════ */

body.v-site {
  margin: 0;
  font-family: var(--v-font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--v-text);
  background: var(--v-bg);
  letter-spacing: -0.003em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.v-site *, .v-site *::before, .v-site *::after { box-sizing: border-box; }
.v-site a { color: inherit; text-decoration: none; }

/* ── HEADINGS ── */
.v-h1 {
  font-family: var(--v-font-head);
  font-size: clamp(26px, 4.6vw, 64px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -1.5px;
  color: var(--v-text);
}
.v-h1 em {            /* the italic royal-blue "payoff" */
  font-style: italic;
  font-weight: 800;
  color: var(--v-primary);
}
.v-h2, .v-section-title {
  font-family: var(--v-font-head);
  font-size: clamp(28px, 4vw, 52px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -1px;
  color: var(--v-text);
}
.v-h3 { font-family: var(--v-font-head); font-size: 24px; font-weight: 700; line-height: 1.25; letter-spacing: -0.3px; color: var(--v-text); }
.v-h4 { font-family: var(--v-font-head); font-size: 20px; font-weight: 700; line-height: 1.3; color: var(--v-text); }
.v-h5 { font-family: var(--v-font-head); font-size: 16px; font-weight: 700; letter-spacing: -0.1px; color: var(--v-text); }

/* ── EYEBROW (uppercase label above section titles) ── */
.v-eyebrow {
  display: inline-block;
  font-family: var(--v-font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--v-primary-2);
}
.v-eyebrow-muted { color: var(--v-muted); }

/* ── BODY / SUB ── */
.v-p, .v-body { font-family: var(--v-font-body); font-size: 16px; line-height: 1.65; color: var(--v-text); }
.v-sub  { font-family: var(--v-font-body); font-size: 18px; line-height: 1.6; color: var(--v-muted); }
.v-small{ font-size: 13px; color: var(--v-muted); line-height: 1.55; }
.v-tiny { font-size: 11px; color: var(--v-muted); letter-spacing: 0.5px; }

/* ── MONO (hashes, IDs, scores, versions) ── */
.v-mono, code, kbd, samp { font-family: var(--v-font-mono); font-size: 12px; color: var(--v-text); letter-spacing: 0; }
.v-mono-muted { color: var(--v-muted); }


/* ────────────────────────────────────────────────────────────────
   NEUMORPHIC SURFACE UTILITIES
   (production class names: .neo-raised / .neo-small / .neo-inset /
    .neo-accent / .neo-primary)
   ──────────────────────────────────────────────────────────────── */
.v-neo       { background: var(--v-bg); border-radius: var(--v-radius-xl); box-shadow: var(--v-elev-raised); border: none; }
.v-neo-sm    { background: var(--v-bg); border-radius: var(--v-radius); box-shadow: var(--v-elev-raised-sm); border: none; }
.v-neo-inset { background: var(--v-bg); border-radius: var(--v-radius); box-shadow: var(--v-elev-inset); border: none; }
.v-neo-accent {
  background: var(--v-grad-card);
  border-radius: var(--v-radius-2xl);
  box-shadow: 14px 14px 30px var(--v-shadow-dark), -14px -14px 30px var(--v-shadow-light),
              0 0 0 1px var(--v-primary-tint), 0 12px 40px rgba(51, 73, 179, 0.10);
  border: none;
}
.v-neo-primary {
  background: var(--v-grad-primary);
  color: #fff;
  border-radius: var(--v-radius);
  box-shadow: 6px 6px 14px var(--v-shadow-dark), -6px -6px 14px var(--v-shadow-light),
              0 8px 20px rgba(51, 73, 179, 0.25);
}

/* ── BUTTONS ── */
.v-btn {
  font-family: var(--v-font-body); font-weight: 600; font-size: 14px;
  border: none; cursor: pointer; border-radius: var(--v-radius);
  padding: 11px 20px; transition: all .25s var(--v-ease);
}
.v-btn-primary { background: var(--v-grad-primary); color: #fff; box-shadow: var(--v-elev-button); }
.v-btn-primary:hover { box-shadow: var(--v-elev-button-hover); transform: translateY(-1px); }
.v-btn-primary:active { transform: translateY(0); box-shadow: var(--v-elev-button); }
.v-btn-ghost { background: var(--v-bg); color: var(--v-text); box-shadow: var(--v-elev-raised-sm); }
.v-btn-ghost:hover { box-shadow: var(--v-elev-hover); transform: translateY(-1px); }
.v-btn-ghost:active { box-shadow: var(--v-elev-inset-xs); transform: none; }

/* ── CHIPS / PILLS ── */
.v-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: var(--v-radius-pill); }
.v-chip-accent  { background: var(--v-accent-tint); color: var(--v-accent-deep); }
.v-chip-primary { background: var(--v-primary-tint); color: var(--v-primary); }