/* =========================================================
   DAANAK Global — Master Design Tokens
   Unified with DAANAK Master Website Design System
   Primary Aesthetic: Obsidian Dark Substrates & Champagne Gold Accents
   Typography: Plus Jakarta Sans
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ---------- Master Gold Palette (Champagne Gold Ramp) ---------- */
  --gold-soft: #faf5ea;
  --gold-line: #e8d9b8;
  --gold-glow: #f5d386;
  --gold-bright: #d4af37;
  --gold-50:  #faf5ea;
  --gold-100: #f5ebd6;
  --gold-200: #e8d9b8;
  --gold-300: #dfc796;
  --gold-400: #d4af37;
  --gold-500: #c5a059; /* Master Champagne Gold */
  --gold-600: #9a7a3a; /* Deep Gold */
  --gold-700: #80632b;
  --gold-800: #614b1f;
  --gold-900: #423213;
  --gold-950: #251c0a;

  /* Aliases for master gold variables */
  --color-gold: var(--gold-500);
  --color-gold-deep: var(--gold-600);
  --color-gold-soft: var(--gold-soft);
  --color-gold-line: var(--gold-line);

  /* ---------- Master Obsidian Ramp (Luxury Dark Substrates) ---------- */
  --obsidian-50:  #f8f9fa;
  --obsidian-100: #eaecef;
  --obsidian-200: #d1d6de;
  --obsidian-300: #9da8b8;
  --obsidian-400: #607088;
  --obsidian-500: #38465c;
  --obsidian-600: #263245;
  --obsidian-700: #1c2538;
  --obsidian-800: #151b26; /* Deep Obsidian Card / Surface */
  --obsidian-900: #0d121c; /* Master Obsidian Background */
  --obsidian-950: #080b12;

  /* Legacy brand ramps mapped safely to Obsidian & Gold for full compatibility */
  --teal-50:  var(--gold-50);
  --teal-100: #eef2f6;
  --teal-200: #dce3ed;
  --teal-300: #b8c7db;
  --teal-400: #829ab8;
  --teal-500: #4c668c;
  --teal-600: #344866;
  --teal-700: #233147;
  --teal-800: #192333;
  --teal-900: var(--obsidian-900);
  --teal-950: var(--obsidian-950);

  --sage-50:  #f4f6f5;
  --sage-100: #e6eae8;
  --sage-200: #d0d9d4;
  --sage-300: #b1c1b7;
  --sage-400: #8fa697;
  --sage-500: #708b79;
  --sage-600: #57705f;
  --sage-700: #425649;
  --sage-800: #303e35;
  --sage-900: #202b24;
  --sage-950: #141c17;

  /* ---------- Primitives: Functional Neutrals (Aligned with Website) ---------- */
  --neutral-0:   #ffffff;
  --neutral-50:  #fafaf9; /* Master website background */
  --neutral-100: #f4f2ec; /* Master website secondary / muted */
  --neutral-200: #e5e7eb; /* Master website border */
  --neutral-300: #d1d5db;
  --neutral-400: #9ca3af;
  --neutral-500: #6b7280;
  --neutral-600: #5b6270; /* Master website muted text */
  --neutral-700: #374151;
  --neutral-800: #1f2937;
  --neutral-900: #111827; /* Master website foreground text */
  --neutral-950: #0d121c;
  --neutral-1000:#000000;

  /* ---------- Primitives: Status Semantic ---------- */
  --success-50:  #edfbf2;
  --success-500: #16a34a;
  --success-700: #15803d;
  --error-50:    #fef2f2;
  --error-500:   #dc2626;
  --error-700:   #b91c1c;
  --warning-50:  var(--gold-50);
  --warning-500: var(--gold-500);
  --warning-700: var(--gold-600);

  /* ---------- Semantic: Surfaces & Text (Light Theme Default) ---------- */
  --bg-primary:     var(--neutral-0);
  --bg-secondary:   var(--neutral-50);
  --bg-elevated:    var(--neutral-0);
  --text-primary:   var(--neutral-900);
  --text-secondary: var(--neutral-600);
  --text-tertiary:  var(--neutral-400);
  --text-inverse:   var(--neutral-0);
  --border-default: var(--neutral-200);
  --border-subtle:  #f0ede6;

  /* ---------- Semantic: Brand & Accents ---------- */
  --brand-primary:   var(--neutral-900);
  --brand-hover:     #000000;
  --brand-subtle-bg: var(--neutral-100);
  --on-brand:        var(--neutral-0);

  --accent-primary:  var(--gold-500);
  --accent-hover:    var(--gold-600);
  --accent-subtle-bg:var(--gold-50);
  --on-accent:       var(--neutral-900);

  --sage-primary:    var(--gold-600);
  --sage-subtle-bg:  var(--gold-50);
  --on-sage:         var(--neutral-900);

  /* ---------- Semantic: Dark / Obsidian Surfaces (Sidebar, Modals, Terminal, Dark Cards) ---------- */
  --surface-dark-bg:        var(--obsidian-900); /* #0d121c */
  --surface-dark-bg-alt:    var(--obsidian-800); /* #151b26 */
  --surface-dark-card:      #161d2c;
  --text-on-dark:           #ffffff;
  --text-on-dark-secondary: #9ca3af;
  --border-on-dark:         rgba(255, 255, 255, 0.08);
  --border-on-dark-gold:    rgba(197, 160, 89, 0.35);

  /* ---------- Configurable Platform Theme Tokens (Default: DAANAK Website Theme) ---------- */
  --bg-sidebar:             #ffffff;
  --bg-sidebar-alt:         #f4f2ec;
  --sidebar-text:           #4b5563;
  --sidebar-text-bright:    #111827;
  --sidebar-border:         #e5e7eb;
  --sidebar-hover-bg:       #f4f2ec;
  --sidebar-active-bg:      #faf5ea;
  --sidebar-active-text:    #9a7a3a;
  --sidebar-active-border:  #e8d9b8;
  --sidebar-section-color:  #9a7a3a;
  --bg-surface:             #fafaf9;
  --bg-secondary:           #f4f2ec;
  --card-bg:                #ffffff;
  --card-border:            #e5e7eb;
  --card-text-primary:      #111827;
  --card-text-secondary:    #5b6270;
  --topbar-bg:              #ffffff;
  --topbar-border:          #e5e7eb;
  --accent-gold:            #c5a059;
  --accent-secondary:       #9a7a3a;

  /* ---------- Status Semantic ---------- */
  --status-success-bg: var(--success-50);
  --status-success-text: var(--success-700);
  --status-error-bg: var(--error-50);
  --status-error-text: var(--error-700);
  --status-warning-bg: var(--warning-50);
  --status-warning-text: var(--warning-700);

  /* ---------- Spacing Scale ---------- */
  --space-2xs: 4px;
  --space-xs:  8px;
  --space-sm:  12px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;
  --space-5xl: 128px;
  --space-6xl: 176px;

  /* ---------- Radius Scale ---------- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-2xl: 28px;
  --radius-full: 9999px;

  /* ---------- Elevation & Ambient Specular Glows ---------- */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.03);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.08), 0 4px 10px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 24px 56px rgba(0, 0, 0, 0.14), 0 8px 16px rgba(0, 0, 0, 0.06);
  --shadow-glow-gold: 0 0 28px -4px rgba(197, 160, 89, 0.35);
  --shadow-glow-gold-lg: 0 0 50px -8px rgba(197, 160, 89, 0.45);
  --shadow-btn-gold: inset 0 1px 1px rgba(255, 255, 255, 0.7), 0 4px 14px -2px rgba(197, 160, 89, 0.45), 0 1px 3px rgba(0, 0, 0, 0.06);

  /* ---------- Typography (Plus Jakarta Sans) ---------- */
  --font-sans: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  --fs-display-lg: clamp(2.75rem, 2.1rem + 2.6vw, 4.5rem);
  --fs-display-md: clamp(2.25rem, 1.8rem + 1.8vw, 3.25rem);
  --fs-h1: clamp(1.9rem, 1.6rem + 1.2vw, 2.5rem);
  --fs-h2: clamp(1.5rem, 1.3rem + 0.8vw, 2rem);
  --fs-h3: 1.25rem;
  --fs-h4: 1.125rem;
  --fs-body-lg: 1.125rem;
  --fs-body-md: 1rem;
  --fs-body-sm: 0.875rem;
  --fs-label: 0.8125rem;
  --fs-caption: 0.75rem;

  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-normal: 1.55;

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 160ms;
  --dur-base: 260ms;
  --dur-slow: 540ms;

  /* ---------- Layout ---------- */
  --container-max: 1240px;
  --nav-height: 76px;
}