/* ============================================================
   UpStart — Color Tokens
   Dark-canvas marketing system. #010102 anchor, single
   lavender-blue chromatic accent. Hierarchy via surface ladder.
   ============================================================ */

:root {
  /* --- Brand & Accent (use lavender scarcely) --- */
  --color-primary: #5e6ad2;          /* signature accent — CTA, brand mark, link emphasis */
  --color-primary-hover: #828fff;    /* lighter lavender — hovered primary CTA */
  --color-primary-focus: #5e69d1;    /* focus-ring tint — focused inputs/buttons */
  --color-brand-secure: #7a7fad;     /* muted lavender-gray — "secure" surfaces */
  --color-on-primary: #ffffff;       /* text on lavender */

  /* --- Surface ladder (canvas -> 4) --- */
  --color-canvas: #010102;           /* near-pure black, faint blue tint — NEVER #000 */
  --color-surface-1: #08090a;        /* feature/pricing cards, product panels */
  --color-surface-2: #101113;        /* featured card, hovered cards */
  --color-surface-3: #17181b;        /* sub-nav, dropdowns */
  --color-surface-4: #1f2024;        /* deepest lifted surface */

  /* --- Hairlines (borders carry depth, not shadow) --- */
  --color-hairline: #23252a;         /* default 1px card/divider borders */
  --color-hairline-strong: #34363c;  /* stronger borders, input focus base */
  --color-hairline-tertiary: #1b1d21;/* tertiary borders for nested surfaces */

  /* --- Inverse (rare white-surface openers) --- */
  --color-inverse-canvas: #ffffff;
  --color-inverse-surface-1: #f4f5f8;
  --color-inverse-surface-2: #eceef2;
  --color-inverse-ink: #010102;

  /* --- Text --- */
  --color-ink: #f7f8f8;              /* headlines + emphasized body */
  --color-ink-muted: #d0d6e0;        /* secondary type */
  --color-ink-subtle: #8a8f98;       /* tertiary — deselected tabs, footer */
  --color-ink-tertiary: #62666d;     /* quaternary — disabled, footnotes */

  /* --- Semantic (only color allowed beyond lavender) --- */
  --color-semantic-success: #27a644; /* status pills, success indicators */
  --color-semantic-overlay: rgba(1, 1, 2, 0.72); /* modal scrim */

  /* --- Logo brand tone (logo lockups on light/inverse surfaces ONLY) --- */
  --color-brand-navy: #102a4c;       /* the lightbulb mark's native navy */

  /* ============================================================
     Semantic aliases — prefer these in components
     ============================================================ */
  --bg-page: var(--color-canvas);
  --bg-card: var(--color-surface-1);
  --bg-card-hover: var(--color-surface-2);
  --bg-card-featured: var(--color-surface-2);
  --bg-nav: var(--color-canvas);
  --bg-elevated: var(--color-surface-3);

  --text-primary: var(--color-ink);
  --text-secondary: var(--color-ink-muted);
  --text-tertiary: var(--color-ink-subtle);
  --text-disabled: var(--color-ink-tertiary);
  --text-link: var(--color-primary-hover);

  --border-default: var(--color-hairline);
  --border-strong: var(--color-hairline-strong);
  --border-subtle: var(--color-hairline-tertiary);

  --accent: var(--color-primary);
  --accent-hover: var(--color-primary-hover);
  --focus-ring: var(--color-primary-focus);

  /* Subtle top-edge highlight on lifted panels ("pixel rendered" feel) */
  --edge-highlight: rgba(255, 255, 255, 0.06);
}