/* ============================================================================
   WithRajesh.com - static-site-v3 - fixed design tokens
   Palette matched to static-site/ (Feature #23): white/orange light mode and
   black/orange dark mode. Phase 3 removes runtime palette customization, so
   these authored :root and .dark values are the only color sources.

   The legacy "gold" token names carry the orange brand and remain because
   shared components and page markup consume them directly.
   ============================================================================ */

:root {
  /* --- Radius and flat elevation --- */
  --radius: 0.625rem;
  --radius-lg: 1rem;
  --radius-sm: 0.375rem;
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;

  /* === raw brand/neutral tokens (light) === */
  --gold: #EA580C;             /* orange brand (Tailwind orange-600) */
  --gold-soft: #F97316;        /* vivid orange accent (orange-500) */
  --gold-deep: #C2410C;        /* deep orange (hover / pressed, orange-700) */
  --ink: #FFFFFF;              /* page background */
  --ink-soft: #FFFFFF;         /* raised surfaces */
  --text: #111111;             /* body text */
  --text-dim: #555555;         /* secondary / muted text */
  --gold-rgb: 234,88,12;       /* #EA580C */
  --gold-rgb2: 249,115,22;     /* #F97316 */
  --cta-text: #FFFFFF;         /* CTA text on orange */

  /* --- Layer 1: neutral base mapped from raw tokens --- */
  --color-bg-primary: var(--ink);
  --color-bg-secondary: #FAFAFA;
  --color-bg-tertiary: #F5F5F5;
  --color-surface: var(--ink-soft);
  --color-surface-hover: #FAFAFA;
  --color-surface-glass: rgba(255,255,255,0.85);

  --color-text-primary: var(--text);
  --color-text-secondary: var(--text-dim);
  --color-text-tertiary: #888888;
  --color-text-muted: #888888;
  --color-text-on-brand: var(--cta-text);
  --color-text-on-dark: #FFFFFF;

  --color-border: #D4D4D4;
  --color-border-hover: #B4B4B4;
  --color-border-glass: rgba(0,0,0,0.09);
  --color-header-shadow: 0 1px 3px rgba(0,0,0,0.08);

  /* --- Layer 2: master accent (orange) --- */
  --gold-50: rgba(var(--gold-rgb),0.10);
  --gold-100: rgba(var(--gold-rgb),0.20);
  --gold-300: var(--gold-soft);
  --color-brand: var(--gold);
  --color-brand-hover: var(--gold-deep);
  --color-brand-strong: var(--gold-deep);
  --color-brand-light: #FFEDD5;
  --color-brand-subtle: #FED7AA;

  /* --- Hero / feature surfaces --- */
  --color-feature-bg: var(--ink-soft);
  --color-feature-bg-soft: #FAFAFA;
  --color-gradient-hero-start: #FFFFFF;
  --color-gradient-hero-end: #FAFAFA;

  /* --- Texture --- */
  --grain-opacity: 0.035;
}

.dark {

  /* === raw brand/neutral tokens (dark) === */
  --gold: #F97316;             /* orange brand (orange-500, deeper than v1 for dark) */
  --gold-soft: #FB923C;        /* light orange (CTA top / hover, orange-400) */
  --gold-deep: #EA580C;        /* deep orange (pressed, orange-600) */
  --ink: #000000;              /* page background */
  --ink-soft: #111111;         /* raised surfaces */
  --text: #FFFFFF;             /* body text */
  --text-dim: #AAAAAA;         /* secondary / muted text */
  --gold-rgb: 249,115,22;      /* #F97316 */
  --gold-rgb2: 251,146,60;     /* #FB923C */
  --cta-text: #000000;         /* CTA text on orange */

  /* --- Layer 1: neutral base mapped from raw tokens --- */
  --color-bg-primary: var(--ink);
  --color-bg-secondary: #0A0A0A;
  --color-bg-tertiary: var(--ink-soft);
  --color-surface: var(--ink-soft);
  --color-surface-hover: #1A1A1A;
  --color-surface-glass: rgba(17,17,17,0.85);

  --color-text-primary: var(--text);
  --color-text-secondary: var(--text-dim);
  --color-text-tertiary: #777777;
  --color-text-muted: #777777;
  --color-text-on-brand: var(--cta-text);
  --color-text-on-dark: #FFFFFF;

  --color-border: #222222;
  --color-border-hover: #444444;
  --color-border-glass: rgba(255,255,255,0.1);
  --color-header-shadow: 0 1px 3px rgba(0,0,0,0.6);

  /* --- Layer 2: master accent (orange, brighter for dark) --- */
  --gold-50: rgba(var(--gold-rgb),0.10);
  --gold-100: rgba(var(--gold-rgb),0.20);
  --gold-300: var(--gold-soft);
  --color-brand: var(--gold);
  --color-brand-hover: var(--gold-soft);
  --color-brand-strong: var(--gold-soft);
  --color-brand-light: rgba(249,115,22,0.15);
  --color-brand-subtle: rgba(249,115,22,0.25);

  --color-feature-bg: var(--ink-soft);
  --color-feature-bg-soft: #0A0A0A;
  --color-gradient-hero-start: var(--ink);
  --color-gradient-hero-end: #0A0A0A;

  --grain-opacity: 0.05;
}

/* ============================================================================
   Layer 3: per-section accents - unified with the master brand (orange).
   All sections inherit the brand via var(--gold); the -bg tints give each
   pillar row a faint warm wash. No edit needed here on a recolor - these
   reference the raw tokens above. Dark overrides below.
   ============================================================================ */
:root {
  --sec-learn-fg: var(--gold);        --sec-learn-bg: rgba(var(--gold-rgb),0.08);
  --sec-work-fg: var(--gold);         --sec-work-bg: rgba(var(--gold-rgb),0.08);
  --sec-build-fg: var(--gold);        --sec-build-bg: rgba(var(--gold-rgb),0.08);
  --sec-support-fg: var(--gold);      --sec-support-bg: rgba(var(--gold-rgb),0.08);
  --sec-collaborate-fg: var(--gold);  --sec-collaborate-bg: rgba(var(--gold-rgb),0.08);
  --sec-invest-fg: var(--gold);       --sec-invest-bg: rgba(var(--gold-rgb),0.08);
  --sec-secure-fg: var(--gold);       --sec-secure-bg: rgba(var(--gold-rgb),0.08);
  --sec-automate-fg: var(--gold);     --sec-automate-bg: rgba(var(--gold-rgb),0.08);
}
.dark {
  --sec-learn-fg: var(--gold);        --sec-learn-bg: rgba(var(--gold-rgb),0.10);
  --sec-work-fg: var(--gold);         --sec-work-bg: rgba(var(--gold-rgb),0.10);
  --sec-build-fg: var(--gold);        --sec-build-bg: rgba(var(--gold-rgb),0.10);
  --sec-support-fg: var(--gold);      --sec-support-bg: rgba(var(--gold-rgb),0.10);
  --sec-collaborate-fg: var(--gold);  --sec-collaborate-bg: rgba(var(--gold-rgb),0.10);
  --sec-invest-fg: var(--gold);       --sec-invest-bg: rgba(var(--gold-rgb),0.10);
  --sec-secure-fg: var(--gold);       --sec-secure-bg: rgba(var(--gold-rgb),0.10);
  --sec-automate-fg: var(--gold);     --sec-automate-bg: rgba(var(--gold-rgb),0.10);
}