/* ============================================================
   ZA Creative — Theme Color Variables
   All color, surface, and semantic tokens live here.
   Never use raw hex values outside this file.
   ============================================================ */

:root {
  /* ── Brand Core ─────────────────────────────────────── */
  --brand-orange:        #FF6B00;
  --brand-orange-light:  #FF8C35;
  --brand-orange-dark:   #D45A00;
  --brand-orange-glow:   rgba(255, 107, 0, 0.18);
  --brand-orange-glow-strong: rgba(255, 107, 0, 0.35);

  --brand-black:         #0A0A0A;
  --brand-white:         #FFFFFF;

  /* ── Light Mode Surfaces ─────────────────────────────── */
  --bg-primary:          #FFFFFF;
  --bg-secondary:        #F7F7F7;
  --bg-tertiary:         #EFEFEF;
  --bg-card:             #FFFFFF;
  --bg-card-hover:       #FFF4EC;
  --bg-nav:              rgba(255, 255, 255, 0.92);
  --bg-overlay:          rgba(10, 10, 10, 0.55);
  --bg-code:             #F3F3F3;

  /* ── Light Mode Text ─────────────────────────────────── */
  --text-primary:        #0A0A0A;
  --text-secondary:      #3A3A3A;
  --text-muted:          #777777;
  --text-inverse:        #FFFFFF;
  --text-accent:         #FF6B00;
  --text-link:           #FF6B00;
  --text-link-hover:     #D45A00;

  /* ── Light Mode Borders ──────────────────────────────── */
  --border-default:      #E0E0E0;
  --border-strong:       #CCCCCC;
  --border-accent:       #FF6B00;
  --border-focus:        #FF8C35;

  /* ── Light Mode Shadows ──────────────────────────────── */
  --shadow-sm:           0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-md:           0 4px 20px rgba(0, 0, 0, 0.10);
  --shadow-lg:           0 8px 40px rgba(0, 0, 0, 0.14);
  --shadow-accent:       0 4px 24px rgba(255, 107, 0, 0.28);
  --shadow-accent-hover: 0 8px 36px rgba(255, 107, 0, 0.40);

  /* ── Status Colors ───────────────────────────────────── */
  --color-success:       #22C55E;
  --color-warning:       #F59E0B;
  --color-error:         #EF4444;
  --color-info:          #3B82F6;

  /* ── Gradients ───────────────────────────────────────── */
  --gradient-brand:      linear-gradient(135deg, #FF6B00 0%, #FF8C35 100%);
  --gradient-brand-dark: linear-gradient(135deg, #D45A00 0%, #FF6B00 100%);
  --gradient-hero:       linear-gradient(135deg, #0A0A0A 0%, #1A1A1A 50%, #0F0F0F 100%);
  --gradient-overlay:    linear-gradient(to bottom, transparent 0%, rgba(10,10,10,0.7) 100%);
  --gradient-card:       linear-gradient(135deg, rgba(255,107,0,0.06) 0%, rgba(255,255,255,0) 100%);

  /* ── Spacing & Radius ────────────────────────────────── */
  --radius-sm:           6px;
  --radius-md:           12px;
  --radius-lg:           20px;
  --radius-xl:           32px;
  --radius-pill:         999px;

  /* ── Transitions ─────────────────────────────────────── */
  --transition-fast:     0.18s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base:     0.28s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:     0.45s cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Z-Index Scale ───────────────────────────────────── */
  --z-base:       1;
  --z-card:       10;
  --z-sticky:     100;
  --z-nav:        200;
  --z-modal:      300;
  --z-toast:      400;
}

/* ── Dark Mode Overrides ──────────────────────────────────── */
[data-theme="dark"] {
  --bg-primary:          #0A0A0A;
  --bg-secondary:        #111111;
  --bg-tertiary:         #1A1A1A;
  --bg-card:             #141414;
  --bg-card-hover:       #1E1400;
  --bg-nav:              rgba(10, 10, 10, 0.94);
  --bg-overlay:          rgba(0, 0, 0, 0.70);
  --bg-code:             #1A1A1A;

  --text-primary:        #F5F5F5;
  --text-secondary:      #C0C0C0;
  --text-muted:          #888888;
  --text-inverse:        #0A0A0A;

  --border-default:      #2A2A2A;
  --border-strong:       #3A3A3A;

  --shadow-sm:           0 2px 8px rgba(0, 0, 0, 0.30);
  --shadow-md:           0 4px 20px rgba(0, 0, 0, 0.45);
  --shadow-lg:           0 8px 40px rgba(0, 0, 0, 0.60);
}