/* =========================================================
   vercher.dev — Brand Tokens
   Version: 1.0
   Purpose: Mechanical enforcement of brand usage
   ========================================================= */

/* NOTE:
   All brand modes follow the same structural token schema.
   Visual differences are intentional, not structural.
*/

/* ---------- Base Neutrals (Shared) ---------- */
:root {
  --white: #ffffff; /* pure white */
  --off-white: #f7f7f5; /* very light gray */
  --light-gray: #e9ebf2; /* very light gray-blue */

  --soft-black: #121212; /* very dark gray */
  --charcoal: #1e1e1e; /* dark gray */
}

/* ---------- Civic Mode ---------- */
:root {
  --civic-primary: #0009ff;  /* Ultramarine Blue */
  --civic-accent: #b22222;  /* Firebrick Red */

  /* Civic surfaces */
  --civic-bg-light: var(--light-gray);
  --civic-bg-dark: var(--charcoal);

  /* Civic text */
  --civic-text-dark: var(--soft-black);
  --civic-text-light: var(--light-gray);
}

/* ---------- Consulting Mode ---------- */
:root {
  --consulting-primary: #fff600; /* Cadmium Yellow */
  --consulting-accent: #0009ff;  /* Ultramarine Blue */

  /* Consulting surfaces */
  --consulting-bg-light: var(--light-gray);
  --consulting-bg-dark: var(--charcoal);

  /* Consulting text */
  --consulting-text-dark: var(--soft-black);
  --consulting-text-light: var(--light-gray);
}

/* ---------- Personal Mode ---------- */
:root {
  --personal-primary: #6a0dad; /* Violet */
  --personal-accent: #0009ff;  /* Ultramarine Blue */

  /* Personal surfaces */
  --personal-bg-light: var(--light-gray);
  --personal-bg-dark: var(--charcoal);

  /* Personal text */
  --personal-text-dark: var(--soft-black);
  --personal-text-light: var(--light-gray);
}

/* =========================================================
   Mode Enforcement (data-brand-mode)
   ========================================================= */

/* Civic */
body[data-brand-mode="civic"] {
  --brand-primary: var(--civic-primary);
  --brand-accent: var(--civic-accent);
  --brand-bg: var(--civic-bg-light);
  --brand-text: var(--civic-text-dark);
}

/* Consulting */
body[data-brand-mode="consulting"] {
  --brand-primary: var(--consulting-primary);
  --brand-accent: var(--consulting-accent);
  --brand-bg: var(--consulting-bg-light);
  --brand-text: var(--consulting-text-dark);
}

/* Personal */
body[data-brand-mode="personal"] {
  --brand-primary: var(--personal-primary);
  --brand-accent: var(--personal-accent);
  --brand-bg: var(--personal-bg-light);
  --brand-text: var(--personal-text-dark);
}

/* ---------------------------------------------------------
   Civic Enhancements
   --------------------------------------------------------- */

/* Civic lockup readability enhancements */
body[data-brand-mode="civic"] .vercher-lockup .lockup-wordmark-outline {
  stroke: var(--civic-accent);
  stroke-width: 2;
}

body[data-brand-mode="civic"] .vercher-lockup .lockup-mark {
  stroke: var(--civic-accent);
  stroke-width: 1;
}

/* Civic Links (Institutional Accent) */
body[data-brand-mode="civic"] a {
  color: var(--civic-accent);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  font-weight: 500;
}

body[data-brand-mode="civic"] a:hover,
body[data-brand-mode="civic"] a:focus {
  text-decoration-thickness: 1px;
}

/* ---------------------------------------------------------
   Consulting Enhancements
   --------------------------------------------------------- */

/* Consulting lockup readability enhancements */
body[data-brand-mode="consulting"] .vercher-lockup .lockup-wordmark-outline {
  stroke: var(--brand-text);
  stroke-width: 2;
}

body[data-brand-mode="consulting"] .vercher-lockup .lockup-mark {
  stroke: var(--brand-text);
  stroke-width: 1;
}

/* Consulting Links (Interaction Accent) */
body[data-brand-mode="consulting"] a {
  color: var(--consulting-accent);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  font-weight: 500;
}

body[data-brand-mode="consulting"] a:hover,
body[data-brand-mode="consulting"] a:focus {
  text-decoration-thickness: 1px;
}

/* ---------------------------------------------------------
   Personal Enhancements
   --------------------------------------------------------- */

/* Personal lockup readability enhancements */
body[data-brand-mode="personal"] .vercher-lockup .lockup-wordmark-outline {
  stroke: var(--personal-accent);
  stroke-width: 2;
}

body[data-brand-mode="personal"] .vercher-lockup .lockup-mark {
  stroke: var(--personal-accent);
  stroke-width: 1;
}

/* Personal Links (Reflective Accent) */
body[data-brand-mode="personal"] a {
  color: var(--brand-accent);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  font-weight: 500;
}

body[data-brand-mode="personal"] a:hover,
body[data-brand-mode="personal"] a:focus {
  text-decoration-thickness: 1px;
}

/* ---------- Generic Brand Hooks ---------- */
.brand-bg {
  background-color: var(--brand-bg);
}

.brand-text {
  color: var(--brand-text);
}

.brand-accent {
  color: var(--brand-primary);
}

.brand-icon {
  fill: var(--brand-primary);
}

/* ---------- Lockup SVG Hooks ---------- */
.vercher-lockup .lockup-wordmark-outline {
  fill: none;
  stroke-linejoin: round;
}

.vercher-lockup .lockup-wordmark-fill {
  fill: currentColor;
}

/* ---------- Brand Lockup (Primary Color Only) ---------- */
.site-branding {
  color: var(--brand-primary);
}
/* =========================================================
   Design System Notes (Locked Decisions)
   ---------------------------------------------------------
   • Brand modes are enforced exclusively via `data-brand-mode`
     on <body>. Class-based brand selectors are intentionally
     not used.

   • The Vercher lockup is treated as a brand component.
     It is rendered as inline SVG wherever brand-aware
     color is required.

   • `--brand-primary` is the only color permitted to drive
     logo, icon, and accent coloration.

   • Consulting mode prioritizes visual ergonomics over
     brightness; neutral backgrounds may be darker than
     traditional “light mode” surfaces by design.
   ========================================================= */