/* ============================================================================
   WithRajesh.com - UI Redesign v2 (Feature #22) - Design Tokens
   Ported verbatim from rajesh.in "By Invitation" UI Design System.
   Light = "engraved letterhead" ivory + bronze · Dark = "midnight lounge"
   near-black ink + gold. Exact values from reference/UI-DESIGN-SYSTEM.md.

   NOTE: rajesh.in defaults to dark (:root) + .light override. v2 keeps its
   inverse architecture (:root light + .dark) to avoid rewriting every Tailwind
   dark: variant; the token VALUES below are identical to the spec.
   ============================================================================ */

:root {
  /* --- Radius / shadow / motion --- */
  --radius: 0.625rem;          /* 10px base (shadcn-grade) */
  --radius-lg: 1rem;
  --radius-sm: 0.375rem;
  --shadow-sm: 0 1px 2px rgba(31,27,19,0.05), 0 1px 3px rgba(31,27,19,0.04);
  --shadow-md: 0 4px 12px rgba(31,27,19,0.07), 0 2px 4px rgba(31,27,19,0.05);
  --shadow-lg: 0 14px 34px -24px rgba(110,84,48,0.4), 0 18px 40px rgba(31,27,19,0.10);

  /* === rajesh.in raw tokens (light = html.light) === */
  --gold: #8a6a3f;             /* bronze accent (legible on ivory) */
  --gold-soft: #a8854c;        /* mid bronze */
  --gold-deep: #6e5430;        /* deep bronze */
  --ink: #f6f3ec;              /* ivory page background */
  --ink-soft: #fdfbf6;         /* warm white surfaces */
  --text: #1f1b13;             /* near-black ink text */
  --text-dim: #5b5446;         /* muted brown-grey */
  --gold-rgb: 138,106,63;      /* #8a6a3f */
  --gold-rgb2: 176,137,82;     /* #b08952 */
  --cta-text: #fdfbf6;         /* CTA text on bronze */

  /* --- Layer 1: neutral base mapped from raw tokens --- */
  --color-bg-primary: var(--ink);
  --color-bg-secondary: #f1ece1;
  --color-bg-tertiary: #ece4d5;
  --color-surface: var(--ink-soft);
  --color-surface-hover: #f6f1e8;
  --color-surface-glass: rgba(246,243,236,0.82);

  --color-text-primary: var(--text);
  --color-text-secondary: var(--text-dim);
  --color-text-tertiary: #6e6759;
  --color-text-muted: #6e6759;
  --color-text-on-brand: var(--cta-text);
  --color-text-on-dark: #f6f3ec;

  --color-border: rgba(var(--gold-rgb),0.22);
  --color-border-hover: rgba(var(--gold-rgb),0.45);
  --color-border-glass: rgba(var(--gold-rgb),0.18);
  --color-header-shadow: 0 1px 3px rgba(31,27,19,0.06);

  /* --- Layer 2: master accent (bronze gold) --- */
  --gold-50: rgba(var(--gold-rgb),0.10);
  --gold-100: rgba(var(--gold-rgb2),0.30);
  --gold-300: var(--gold-soft);
  --color-brand: var(--gold);
  --color-brand-hover: var(--gold-deep);
  --color-brand-strong: var(--gold-deep);
  --color-brand-light: rgba(var(--gold-rgb),0.10);
  --color-brand-subtle: rgba(var(--gold-rgb),0.18);

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

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

.dark {
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 6px 18px rgba(0,0,0,0.5);
  --shadow-lg: 0 24px 50px rgba(0,0,0,0.6);

  /* === rajesh.in raw tokens (dark = :root in spec, brand-first) === */
  --gold: #cfae6d;             /* primary accent */
  --gold-soft: #ecd9ad;        /* light gold (CTA top, ghost text) */
  --gold-deep: #a8854c;        /* deep gold (gradient tail) */
  --ink: #0a0a0c;              /* page background */
  --ink-soft: #131318;         /* raised surfaces */
  --text: #e9e7e2;             /* body text */
  --text-dim: #a8a6a0;         /* secondary / muted text */
  --gold-rgb: 201,168,106;     /* #c9a86a */
  --gold-rgb2: 207,174,109;    /* #cfae6d */
  --cta-text: #1a1407;         /* CTA text on gold */

  /* --- Layer 1: neutral base mapped from raw tokens --- */
  --color-bg-primary: var(--ink);
  --color-bg-secondary: #0d0d10;
  --color-bg-tertiary: var(--ink-soft);
  --color-surface: var(--ink-soft);
  --color-surface-hover: #1a1a20;
  --color-surface-glass: rgba(10,10,12,0.82);

  --color-text-primary: var(--text);
  --color-text-secondary: var(--text-dim);
  --color-text-tertiary: #8a8880;
  --color-text-muted: #8a8880;
  --color-text-on-brand: var(--cta-text);
  --color-text-on-dark: #e9e7e2;

  --color-border: rgba(var(--gold-rgb),0.14);
  --color-border-hover: rgba(var(--gold-rgb),0.34);
  --color-border-glass: rgba(var(--gold-rgb),0.18);
  --color-header-shadow: none;

  /* --- Layer 2: master accent (gold, brighter for dark) --- */
  --gold-50: rgba(var(--gold-rgb),0.10);
  --gold-100: rgba(var(--gold-rgb),0.30);
  --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(var(--gold-rgb),0.12);
  --color-brand-subtle: rgba(var(--gold-rgb),0.22);

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

  --grain-opacity: 0.05;
}

/* ============================================================================
   Layer 3: per-section accents - unified GOLD monochrome (rajesh.in is strictly
   gold, no rainbow hues). All sections inherit the brand gold; the -bg tints
   give each pillar row a faint warm wash. 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);
}