/* tokens.css — MBDC franchise website design tokens.
 *
 * The full design system as CSS custom properties on :root. Every other
 * stylesheet (base, components, pages) references these tokens; raw color,
 * size, or font literals must not appear outside this file.
 *
 * Brand: electric indigo (#2B23F8). The accent is reserved for primary
 * CTAs, key emphasis, focus rings, and small graphic accents. Neutral
 * surfaces and text use a cool, harmonized scale that pairs cleanly with
 * the brand color without competing with it.
 *
 * Validates: Requirements 3.1, 3.2, 3.3, 3.4, 3.5
 */

:root {
  /* Surface */
  --bg-primary:             #FFFFFF;
  --bg-soft:                #F6F6FB;       /* cool off-white */
  --bg-strong:              #0F1430;       /* dark surface (CTA banner, footer, dark hero) */

  /* Text */
  --color-text:             #0F1430;       /* deep blue-black */
  --color-text-on-dark:     #FFFFFF;
  --color-muted:            #5A5F75;
  --color-subtle:           #8589A0;

  /* Borders */
  --color-border:           #E4E5EC;
  --color-border-strong:    #C9CBD7;
  --color-border-on-dark:   rgba(255, 255, 255, 0.16);

  /* Accent — the single MBDC brand color */
  --color-accent:           #2B23F8;       /* primary brand */
  --color-accent-hover:     #211ACC;
  --color-accent-soft:      #EEEDFE;       /* subtle wash for highlights / tints */
  --color-accent-light:     #5650FB;       /* lighter accent for graphics only */
  --color-accent-on-dark:   #A6A2FE;       /* readable brand tint on dark surfaces (>= 4.5:1) */
  --color-accent-contrast:  #FFFFFF;

  /* Highlight alias — kept so legacy rules referencing --color-highlight
   * still resolve to the brand color. New rules should use --color-accent. */
  --color-highlight:        var(--color-accent);

  /* Status */
  --color-error:            #B3261E;
  --color-error-soft:       #FBEAEA;
  --color-success:          #1F7A55;

  /* Reserved soft gradient — used only for subtle background washes when
   * needed. Never on buttons, text, cards, or banners. */
  --gradient-soft:          linear-gradient(180deg, var(--bg-soft) 0%, var(--bg-primary) 100%);

  /* Radius */
  --radius:                 10px;
  --radius-sm:              6px;

  /* Typography — families */
  --font-sans:              "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display:           "Manrope", "Inter", system-ui, sans-serif;

  /* Typography — type scale (kept tight; rely on weight contrast) */
  --fs-caption:             0.8125rem;     /* 13px */
  --fs-body:                1rem;          /* 16px (mobile minimum) */
  --fs-subhead:             1.125rem;      /* 18px */
  --fs-h3:                  1.375rem;      /* 22px */
  --fs-h2:                  1.75rem;       /* 28px */
  --fs-h1:                  2.25rem;       /* 36px */

  /* Typography — line heights */
  --line-body:              1.6;
  --line-tight:             1.25;
  --line-heading:           1.15;

  /* Letter spacing */
  --tracking-tight:         -0.01em;
  --tracking-wide:          0.08em;

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

  /* Layout */
  --container-max:          1120px;
  --tap-min:                44px;
  --header-height:          64px;

  /* Elevation */
  --shadow-card:            0 1px 2px rgba(15, 20, 48, 0.05);
  --shadow-card-hover:      0 8px 24px rgba(15, 20, 48, 0.08);
  --shadow-accent:          0 8px 24px rgba(43, 35, 248, 0.18);

  /* Motion */
  --transition-fast:        120ms ease;
  --transition:             180ms ease;
}