/* DomainForge Design Tokens - Single Source of Truth */

:root {
  /* Brand Colors — unified single source (reconciles former #FF6A00/#FF7A00/#FF6600) */
  --df-navy: #081020;          /* primary dark ground */
  --forge-navy-deep: #050B18;  /* deepest, for hero base gradient */
  --forge-navy-panel: #111D34; /* raised surfaces / cards on dark */
  --df-cream: #FAF3DD; /* official */
  --df-white: #FFF;
  --df-orange: #FF6A00;

  /* Ember accent scale (the single bold accent) */
  --ember: #FF6A00;
  --ember-hi: #FF9245;   /* highlights / gradient top */
  --ember-deep: #D95400; /* hover / active */
  --ember-tint: rgb(255 106 0 / 12%); /* faint fills */

  /* Fonts. The self-hosted @fontsource-variable packages register the
     "… Variable" family names, so those lead each stack; the plain names stay
     behind them for anyone who has the static face installed locally. */
  --font-display: 'Archivo Variable', 'Archivo', 'Hanken Grotesk Variable', system-ui, -apple-system, sans-serif;
  --font-body: 'Hanken Grotesk Variable', 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono Variable', 'JetBrains Mono', ui-monospace, 'SFMono-Regular', 'Menlo', monospace;

  /* Neutrals (warm-biased on light, cool-steel on dark) */
  --df-text: #141A22;  /* dark ink on light */
  --df-muted: #5A6270;

  /* States */
  --df-focus: #76A7FF; /* visible focus ring */
  --df-error: #D24A43;
  --df-success: #1B9E5A;

  /* Semantic pairs (LOCK THESE) */
  --bg-dark: var(--df-navy);
  --bg-cream: var(--df-cream);
  --bg-white: var(--df-white);
  --fg-on-dark: var(--df-white); /* not cream */
  --fg-on-cream: var(--df-text);
  --fg-on-white: var(--df-text);

  /* Buttons */
  --btn-primary-bg: var(--df-orange);
  --btn-primary-fg: var(--df-navy); /* check contrast */
  --btn-primary-bg-hover: var(--ember-deep);  /* darker, no opacity */
  --btn-outline-fg: var(--df-text);
  --btn-outline-border: var(--df-text);

  /* Links */
  --link: #0A84FF;
  --link-hover: #0066D6;

  /* Spacing/typography */
  --base-font: 16px;
  --lh: 1.5;
  --radius: 10px;
  --radius-panel: 16px;
  --ring: 3px;

  /* Legacy compatibility - map old variables to new system */
  --brand-primary: var(--df-orange);
  --brand-bg-dark: var(--df-navy);
  --brand-text-light: var(--df-white);
  --brand-text-muted: var(--df-muted);
  --brand-success: var(--df-success);
  --brand-warning: #f59e0b;
  --brand-error: var(--df-error);
  --color-bg-dark: var(--df-navy);
  --color-bg-mid: #0E1830;
  --color-bg-light: #16243F;
  --color-bg-card: var(--forge-navy-panel);
  --color-text-light: var(--df-white);
  --color-text-muted: var(--df-muted);
  --color-text-muted-dark: #8A94A6;
  --color-text-cream: var(--df-cream);
  --color-accent: var(--df-orange);
  --color-accent-hover: var(--btn-primary-bg-hover);
  --color-border: #20304C;
  --color-border-alt: #1A2F45;
  --color-input-bg: var(--df-cream);
  --color-input-text: var(--df-text);
  --color-forgescan-cream: var(--df-cream);
  --df-slate: var(--forge-navy-panel);
  --df-black: #111;
  --df-text-dark: var(--df-text);
  --df-text-light: var(--df-white);
  --df-text-muted-light: var(--df-muted);
  --df-text-muted-dark: #8A94A6;
  --df-border-light: #E7E1CF;
  --df-border-dark: #20304C;
  
  /* Spacing */
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;

  /* Type sizes */
  --font-xs: 0.8125rem;
  --font-sm: 0.9375rem;
  --font-base: 1rem;
  --font-md: 1.125rem;
  --font-lg: 1.25rem;
  --font-xl: 1.5rem;
  --font-2xl: 2rem;
  --font-3xl: clamp(2.1rem, 3.5vw, 2.75rem);
  --font-4xl: clamp(2.6rem, 6vw, 4.25rem); /* hero display */

  /* Button Tokens */
  --btn-height-sm: 32px;
  --btn-height-md: 40px;
  --btn-height-lg: 48px;
  --btn-padding-x: 1rem;
  --btn-padding-y: 0.65rem;
  --btn-radius: var(--radius);
  --btn-font: var(--font-base);
  --btn-font-weight: 600;
  --btn-border-width: 1px;
  --btn-focus-ring: 0 0 0 3px rgb(118 167 255 / 40%);

  /* Table Tokens */
  --table-border-light: var(--df-border-light);
  --table-header-bg-light: #F5F5F5;
  --table-header-color-light: var(--df-text-dark);
  --table-zebra-bg-light: #FAFAFA;
  --table-hover-bg-light: rgb(0 0 0 / 6%);
  --table-border-dark: var(--df-border-dark);
  --table-header-bg-dark: var(--df-navy);
  --table-header-color-dark: #A1A7B3;
  --table-zebra-bg-dark: rgb(255 255 255 / 5%);
  --table-hover-bg-dark: rgb(255 255 255 / 6%);
  --table-cell-padding: 0.75rem;
  --table-radius: var(--radius);
  --table-font: var(--font-base);
  --table-header-font: var(--font-sm);

  /* Banner system tokens */
  --banner-bg: var(--df-orange);
  --banner-text: var(--df-navy);
  --banner-text-muted: var(--df-text-muted-dark);
  --banner-text-light: var(--df-white);
  
  /* Gradient & overlay system */
  --banner-gradient-light: linear-gradient(
    135deg,
    var(--df-orange) 0%,
    #FF8C1A 100%
  );
  --banner-gradient-dark: linear-gradient(
    135deg,
    var(--df-navy) 0%,
    var(--df-slate) 100%
  );
  --banner-overlay-light: rgb(0 0 0 / 40%);
  --banner-overlay-dark: rgb(255 255 255 / 10%);
  
  /* Spacing & decoration */
  --banner-radius: var(--radius);
  --shadow: 0 2px 8px rgb(0 0 0 / 5%);
  --container-max: 1200px;
}