/*
 * Investor Developments design tokens — Version 1.0
 *
 * Centralized per Steve's branding instruction: colors, typography, and
 * base scales are defined ONCE here as CSS custom properties. No screen,
 * component, or report template should hardcode a hex value, font name, or
 * spacing number directly -- they reference these tokens instead. This
 * keeps the visual design changeable later without touching application
 * logic, exactly as requested.
 *
 * This file is a preparatory design-system foundation only. No respondent-
 * facing or administrator-facing screens have been built yet (that begins
 * at the next milestone). Nothing in this file is final -- Steve will see
 * the proposed visual implementation before it's treated as final.
 *
 * Source: Branding.png (brand guide) and "Full Logo no Tag-line.png",
 * supplied 2026-08-30, stored unaltered at assets/brand/.
 */

:root {
  /* --- Brand color palette (exact values from the supplied brand guide) --- */
  --id-primary-blue: #42A5F5;
  --id-deep-blue: #174D73;
  --id-accent-gold: #D4B15A;
  --id-charcoal: #202126;
  --id-slate-gray: #6B6F76;
  --id-light-gray: #E5E7EB;
  --id-white: #FFFFFF;

  /* --- Semantic color roles (screens/components reference these, never
     the raw palette above, so the *meaning* of a color can be re-pointed
     without hunting through every template) --- */
  --id-color-surface: var(--id-white);
  --id-color-surface-muted: var(--id-light-gray);
  --id-color-text-primary: var(--id-charcoal);
  --id-color-text-secondary: var(--id-slate-gray);
  --id-color-text-on-dark: var(--id-white);
  --id-color-institutional: var(--id-deep-blue);       /* principal interface color */
  --id-color-brand-emphasis: var(--id-primary-blue);   /* links, active states, progress */
  --id-color-accent: var(--id-accent-gold);            /* sparing use only: highlights, dividers, selected state */
  --id-color-border: var(--id-light-gray);
  /* Form-validation only (e.g. "enter a valid email") -- unrelated to and
     never used for trait/score visualization, which stays red/green-free
     per the brand guide's explicit rule. */
  --id-color-error: #B3261E;
  /* Page background, distinct from --id-color-surface-muted (still used for
     smaller muted fills like the consent box). Lighter than the original
     light-gray so the extended 140-question experience reads as calm
     rather than gray, while keeping clear contrast against the white
     assessment card. Derived from the existing palette, not a new color. */
  --id-color-page-background: color-mix(in srgb, var(--id-light-gray) 45%, var(--id-white));
  /* Restrained header/content transition accent -- a thin gradient between
     the two brand blues' natural neighbor and the gold accent, echoing the
     logo mark without becoming decorative. Used in exactly one place. */
  --id-header-accent-gradient: linear-gradient(90deg, var(--id-primary-blue), var(--id-accent-gold));

  /* Answer-card states are intentionally the ONLY place selection color
     appears near a question. All three unanswered options share this
     token -- there is no "positive/negative" color coding anywhere in the
     assessment UI. */
  --id-answer-card-default-bg: var(--id-white);
  --id-answer-card-default-border: var(--id-light-gray);
  --id-answer-card-selected-border: var(--id-accent-gold);
  --id-answer-card-selected-bg: #FBF6EC; /* tint of accent gold, ~8% */

  /* --- Typography --- */
  --id-font-heading: "Montserrat", -apple-system, "Segoe UI", sans-serif;
  --id-font-body: "Lato", -apple-system, "Segoe UI", sans-serif;
  --id-font-weight-heading-primary: 700;   /* Montserrat Bold */
  --id-font-weight-heading-secondary: 600; /* Montserrat SemiBold */
  --id-font-weight-body: 400;              /* Lato Regular */

  --id-h1-size: 32px;   --id-h1-line: 40px;
  --id-h2-size: 24px;   --id-h2-line: 32px;
  --id-h3-size: 18px;   --id-h3-line: 28px;
  --id-body-size: 16px; --id-body-line: 24px;

  /* --- Spacing scale (generous, per "spacious rather than crowded") --- */
  --id-space-1: 4px;
  --id-space-2: 8px;
  --id-space-3: 16px;
  --id-space-4: 24px;
  --id-space-5: 32px;
  --id-space-6: 48px;
  --id-space-7: 64px;

  /* --- Radii / shadows (restrained, not decorative) --- */
  --id-radius-sm: 4px;
  --id-radius-md: 8px;
  --id-radius-lg: 12px;
  --id-shadow-card: 0 1px 3px rgba(32, 33, 38, 0.08);
  --id-shadow-elevated: 0 4px 16px rgba(32, 33, 38, 0.10);

  /* --- Layout --- */
  --id-max-content-width: 720px; /* comfortable reading measure for 140 questions */
  --id-clear-space-logo: 24px;   /* minimum clear space around the logo */
}