/* ═══════════════════════════════════════════════════════════════════
   DESIGN SYSTEM — Armando Qose Portfolio
   Version: 1.0

   Architecture:
   1. Primitives    → Raw values (colors, sizes, fonts)
   2. Semantics     → Purpose-based tokens (--color-text-primary)
   3. Components    → Component-specific tokens (--card-bg)
   4. Themes        → Override semantics per theme

   Usage:
   - NEVER use raw hex values in components
   - ALWAYS reference semantic tokens
   - Themes only override semantic + component tokens
   ═══════════════════════════════════════════════════════════════════ */

/* ─── 1. PRIMITIVES ─────────────────────────────────────────────── */
/* These NEVER change between themes. They are the raw palette. */

:root {

  /* ── Color Primitives ── */

  /* Neutrals — Warm Black Scale */
  --p-black-950: #0c0a08;
  --p-black-900: #110e0b;
  --p-black-850: #16120e;
  --p-black-800: #1c1814;
  --p-black-700: #2a241e;
  --p-black-600: #3d3529;
  --p-black-500: #5c5245;
  --p-black-400: #7d7264;
  --p-black-300: #9e9284;
  --p-black-200: #b5a99a;
  --p-black-100: #d4c9ba;
  --p-black-50:  #f5f0eb;
  --p-white:     #fffcf9;

  /* Amber — Accent Scale */
  --p-amber-700: #8b6b3e;
  --p-amber-600: #a07a48;
  --p-amber-500: #b8946a;
  --p-amber-400: #d4a574;
  --p-amber-300: #e0be94;
  --p-amber-200: #ecd5b8;
  --p-amber-100: #f5e8d8;

  /* Alpha — For overlays, borders, glass effects */
  --p-alpha-white-3:  rgba(255, 248, 240, 0.03);
  --p-alpha-white-4:  rgba(255, 248, 240, 0.04);
  --p-alpha-white-6:  rgba(255, 248, 240, 0.06);
  --p-alpha-white-7:  rgba(255, 248, 240, 0.07);
  --p-alpha-white-8:  rgba(255, 248, 240, 0.08);
  --p-alpha-white-10: rgba(255, 248, 240, 0.10);
  --p-alpha-white-15: rgba(255, 248, 240, 0.15);
  --p-alpha-white-30: rgba(255, 248, 240, 0.30);
  --p-alpha-white-55: rgba(255, 248, 240, 0.55);
  --p-alpha-white-75: rgba(255, 248, 240, 0.75);
  --p-alpha-amber-3:  rgba(200, 164, 126, 0.03);
  --p-alpha-amber-5:  rgba(200, 164, 126, 0.05);
  --p-alpha-amber-6:  rgba(200, 164, 126, 0.06);
  --p-alpha-amber-8:  rgba(200, 164, 126, 0.08);

  /* ── Typography Primitives ── */
  --p-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Type Scale — Major Third (1.25) */
  --p-text-xs:   11px;
  --p-text-sm:   13px;
  --p-text-base: 14px;
  --p-text-md:   16px;
  --p-text-lg:   18px;
  --p-text-xl:   20px;
  --p-text-2xl:  28px;
  --p-text-3xl:  32px;
  --p-text-4xl:  36px;
  --p-text-5xl:  48px;
  --p-text-6xl:  56px;
  --p-text-7xl:  64px;

  /* Font Weights */
  --p-weight-light:    300;
  --p-weight-regular:  400;
  --p-weight-medium:   500;
  --p-weight-semibold: 600;
  --p-weight-bold:     700;

  /* Letter Spacing */
  --p-tracking-tight:   -3px;
  --p-tracking-snug:    -1.5px;
  --p-tracking-normal:  -0.3px;
  --p-tracking-wide:    0.5px;
  --p-tracking-wider:   1px;
  --p-tracking-widest:  1.5px;
  --p-tracking-ultra:   2px;

  /* Line Heights */
  --p-leading-none:   1.0;
  --p-leading-tight:  1.05;
  --p-leading-snug:   1.2;
  --p-leading-normal: 1.5;
  --p-leading-relaxed: 1.7;
  --p-leading-loose:  1.8;

  /* ── Spacing Scale (4pt grid) ── */
  --p-space-0:   0;
  --p-space-1:   4px;
  --p-space-2:   8px;
  --p-space-3:   12px;
  --p-space-4:   16px;
  --p-space-5:   20px;
  --p-space-6:   24px;
  --p-space-8:   32px;
  --p-space-10:  40px;
  --p-space-12:  48px;
  --p-space-16:  64px;
  --p-space-20:  80px;
  --p-space-24:  96px;
  --p-space-28:  112px;
  --p-space-32:  128px;
  --p-space-36:  144px;

  /* ── Border Radius ── */
  --p-radius-sm:   8px;
  --p-radius-md:   12px;
  --p-radius-lg:   16px;
  --p-radius-xl:   20px;
  --p-radius-2xl:  24px;
  --p-radius-full: 100px;

  /* ── Shadows ── */
  --p-shadow-sm:  0 4px 12px rgba(0,0,0,0.2);
  --p-shadow-md:  0 8px 30px rgba(0,0,0,0.3);
  --p-shadow-lg:  0 20px 60px rgba(0,0,0,0.5);
  --p-shadow-xl:  0 30px 80px rgba(0,0,0,0.6);
  --p-shadow-glow: 0 0 40px rgba(200,164,126,0.08);

  /* ── Transitions ── */
  --p-ease-default: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --p-ease-bounce:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --p-duration-fast:   0.15s;
  --p-duration-normal: 0.3s;
  --p-duration-slow:   0.5s;
  --p-duration-slower:  0.8s;

  /* ── Breakpoints (reference only, used in @media) ── */
  /* --bp-mobile:  480px  */
  /* --bp-tablet:  768px  */
  /* --bp-desktop: 1080px */
  /* --bp-wide:    1440px */

  /* ── Layout ── */
  --p-max-width: 1080px;
  --p-gutter:    48px;
  --p-gutter-mobile: 24px;
}


/* ─── 2. SEMANTIC TOKENS ────────────────────────────────────────── */
/* Purpose-based. These are what components reference. */
/* Themes override THESE, not primitives. */

:root {

  /* ── Surfaces ── */
  --color-bg-primary:    var(--p-black-950);
  --color-bg-secondary:  var(--p-black-900);
  --color-bg-elevated:   var(--p-alpha-white-4);
  --color-bg-hover:      var(--p-alpha-white-3);

  /* ── Text ── */
  --color-text-primary:   var(--p-black-50);
  --color-text-secondary: var(--p-black-200);
  --color-text-tertiary:  var(--p-black-300);
  --color-text-accent:    var(--p-amber-400);
  --color-text-label:     var(--p-amber-500);
  --color-text-inverse:   var(--p-black-950);

  /* ── Borders ── */
  --color-border-default:  var(--p-alpha-white-8);
  --color-border-subtle:   var(--p-alpha-white-6);
  --color-border-card:     var(--p-alpha-white-7);
  --color-border-hover:    var(--p-alpha-white-15);

  /* ── Interactive ── */
  --color-btn-primary-bg:    var(--p-black-50);
  --color-btn-primary-text:  var(--p-black-950);
  --color-btn-primary-hover: var(--p-white);
  --color-link:              var(--p-amber-400);
  --color-link-hover:        var(--p-amber-300);

  /* ── Ambient / Decorative ── */
  --color-glow-warm:     var(--p-alpha-amber-6);
  --color-glow-neutral:  var(--p-alpha-white-3);
  --color-overlay:       rgba(12, 10, 8, 0.8);

  /* ── Glass Effect ── */
  --glass-bg:      var(--color-overlay);
  --glass-blur:    blur(20px);
  --glass-saturate: saturate(180%);
}


/* ─── 3. COMPONENT TOKENS ───────────────────────────────────────── */
/* Specific to UI components. Reference semantic tokens. */

:root {

  /* ── Nav ── */
  --nav-bg:          var(--glass-bg);
  --nav-border:      var(--color-border-default);
  --nav-text:        var(--color-text-secondary);
  --nav-text-hover:  var(--color-text-primary);
  --nav-logo:        var(--color-text-primary);
  --nav-cta-bg:      var(--color-btn-primary-bg);
  --nav-cta-text:    var(--color-btn-primary-text);
  --nav-height:      56px;

  /* ── Hero ── */
  --hero-gradient-text: linear-gradient(135deg, var(--p-white), var(--p-amber-400));
  --hero-stat-gradient: linear-gradient(135deg, var(--p-white), var(--p-amber-400));

  /* ── Cards (Gallery) ── */
  --card-radius:        var(--p-radius-xl);
  --card-border:        var(--color-border-card);
  --card-shadow-hover:  var(--p-shadow-lg);
  --card-tag-bg:        var(--p-alpha-white-10);
  --card-tag-border:    var(--p-alpha-white-8);

  /* ── Experience ── */
  --exp-border:         var(--color-border-default);
  --exp-hover-bg:       var(--color-bg-hover);
  --exp-role-hover:     var(--color-text-accent);

  /* ── Tags (Skills/Industries) ── */
  --tag-bg:             var(--color-bg-elevated);
  --tag-border:         var(--color-border-card);
  --tag-text:           var(--color-text-secondary);
  --tag-text-hover:     var(--color-text-primary);
  --tag-border-hover:   var(--color-border-hover);

  /* ── Now Cards ── */
  --now-card-bg:        var(--color-bg-elevated);
  --now-card-border:    var(--color-border-card);
  --now-card-hover:     var(--color-border-hover);

  /* ── Section ── */
  --section-label-color: var(--color-text-label);
  --section-padding-y:   var(--p-space-24);
  --section-gap:         var(--p-space-12);

  /* ── Contact ── */
  --contact-heading-gradient: linear-gradient(180deg, var(--p-white), var(--p-amber-400));
}


/* ─── 4. THEMES ─────────────────────────────────────────────────── */

/* Theme: Dark Warm (default — already set above) */
[data-theme="dark-warm"] {
  /* Default values, no overrides needed */
}

/* Theme: Dark Neutral */
[data-theme="dark-neutral"] {
  --color-bg-primary:    #000000;
  --color-bg-secondary:  #0a0a0a;
  --color-text-primary:  #f5f5f7;
  --color-text-secondary: #a1a1a6;
  --color-text-tertiary: #86868b;
  --color-text-accent:   #ffffff;
  --color-text-label:    #a1a1a6;
  --color-text-inverse:  #000000;
  --color-border-default: rgba(255,255,255,0.08);
  --color-border-subtle:  rgba(255,255,255,0.06);
  --color-btn-primary-bg: #f5f5f7;
  --color-btn-primary-text: #000;
  --color-glow-warm:     rgba(255,255,255,0.04);
  --hero-gradient-text:  linear-gradient(135deg, #fff, #a0a0a0);
  --hero-stat-gradient:  linear-gradient(135deg, #fff, #a0a0a0);
  --contact-heading-gradient: linear-gradient(180deg, #fff, #a0a0a0);
  --exp-role-hover:      #fff;
  --section-label-color: #a1a1a6;
}


/* Theme: Midnight (deep blue-black) */
[data-theme="midnight"] {
  --color-bg-primary:    #080a10;
  --color-bg-secondary:  #0c0e16;
  --color-text-primary:  #e8eaf0;
  --color-text-secondary: #8a8fa0;
  --color-text-accent:   #7a9ec9;
  --color-text-label:    #6888b0;
  --color-text-inverse:  #080a10;
  --color-border-default: rgba(140,160,200,0.08);
  --color-btn-primary-bg: #e8eaf0;
  --color-btn-primary-text: #080a10;
  --color-glow-warm:     rgba(100,140,200,0.06);
  --hero-gradient-text:  linear-gradient(135deg, #e8eaf0, #7a9ec9);
  --hero-stat-gradient:  linear-gradient(135deg, #e8eaf0, #7a9ec9);
  --contact-heading-gradient: linear-gradient(180deg, #e8eaf0, #7a9ec9);
  --exp-role-hover:      #7a9ec9;
  --section-label-color: #6888b0;
}