/* ============================================================
   GP Sourcing — Design Tokens
   Premium Crisp Slate & B2B Royal Blue Aesthetic
   Light: #ffffff base | Dark: #09090b base
   ============================================================ */

:root {
  /* ── Palette ── */
  --bg:           #ffffff;          /* Pure clean white */
  --bg-soft:      #f4f4f5;          /* Crisp light neutral grey */
  --bg-subtle:    #e4e4e7;          /* Boundary grey */
  --surface:      #ffffff;          /* White card surface */
  --surface-2:    #fafafa;          /* Subtle off-white */
  --border:       rgba(24, 24, 27, 0.06); /* Ultra clean neutral border */
  --border-mid:   rgba(24, 24, 27, 0.10);
  --border-strong:rgba(24, 24, 27, 0.15);

  --text:         #09090b;          /* Obsidian deep black */
  --text-2:       #27272a;          /* Charcoal grey */
  --muted:        #52525b;          /* Zinc body text grey */
  --faint:        #71717a;          /* Zinc secondary label grey */

  /* ── Accent — B2B Royal Blue ── */
  --accent:       #3b82f6;          /* Premium royal blue */
  --accent-2:     #2563eb;          /* Indigo accent */
  --accent-soft:  rgba(59, 130, 246, 0.04);
  --accent-border:rgba(59, 130, 246, 0.15);
  --cyan:         #06b6d4;          /* Complementary cyan */
  --cyan-soft:    rgba(6, 182, 212, 0.06);

  /* ── Gradient Text ── */
  --text-gradient-start: #2563eb;
  --text-gradient-mid:   #06b6d4;
  --text-gradient-end:   #3b82f6;

  /* ── Semantic ── */
  --green:        #10b981;
  --green-soft:   rgba(16, 185, 129, 0.06);
  --red:          #ef4444;

  /* ── Header ── */
  --header-height: 72px;
  --header-bg:    rgba(255, 255, 255, 0.75);
  --header-blur:  20px;
  --logo-gp-color:    #09090b;
  --logo-text-color:  #27272a;

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

  /* ── Shadow ── */
  --shadow-xs:  0 1px 2px rgba(0,0,0,0.02);
  --shadow-sm:  0 1px 3px rgba(59,130,246,0.03), 0 1px 2px rgba(0,0,0,0.01);
  --shadow-md:  0 4px 12px rgba(59,130,246,0.02), 0 2px 4px rgba(0,0,0,0.01);
  --shadow-lg:  0 10px 20px rgba(59,130,246,0.03), 0 4px 8px rgba(0,0,0,0.01);
  --shadow-xl:  0 20px 30px rgba(59,130,246,0.04), 0 8px 12px rgba(0,0,0,0.02);

  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  --font-display: 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'PingFang SC', 'Microsoft YaHei', sans-serif;

  /* ── Animation ── */
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth:  cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast:  150ms;
  --t-base:  220ms;
  --t-slow:  400ms;

  /* ── Layout ── */
  --max-w:        1400px;
  --max-w-text:   720px;
  --section-py:   96px;
}

/* ── Dark mode ── */
[data-theme="dark"] {
  --bg:           #09090b;          /* Sleek charcoal obsidian */
  --bg-soft:      #18181b;          /* Zinc dark grey */
  --bg-subtle:    #27272a;
  --surface:      #09090b;          /* Same as bg for clean flat design */
  --surface-2:    #18181b;
  --border:       rgba(255, 255, 255, 0.08); /* Crisp white faint border */
  --border-mid:   rgba(255, 255, 255, 0.14);
  --border-strong:rgba(255, 255, 255, 0.20);

  --text:         #fafafa;          /* Crisp white */
  --text-2:       #f4f4f5;          /* Soft white */
  --muted:        #a1a1aa;          /* Zinc secondary grey */
  --faint:        #71717a;          /* Zinc dark muted */

  --accent:       #3b82f6;          /* Bright royal blue */
  --accent-2:     #1d4ed8;          /* Electric royal blue */
  --accent-soft:  rgba(59, 130, 246, 0.08);
  --accent-border:rgba(59, 130, 246, 0.25);
  --cyan:         #22d3ee;          /* Picton Blue complementary accent */
  --cyan-soft:    rgba(34, 211, 238, 0.08);

  /* ── Gradient Text ── */
  --text-gradient-start: #3b82f6;
  --text-gradient-mid:   #22d3ee;
  --text-gradient-end:   #818cf8;

  --header-bg:    rgba(9, 9, 11, 0.75);
  --logo-gp-color:    #ffffff;
  --logo-text-color:  #cbd5e1;

  --shadow-xs: 0 1px 2px rgba(0,0,0,0.3);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.3), 0 2px 4px rgba(0,0,0,0.2);
  --shadow-lg: 0 10px 15px rgba(0,0,0,0.35), 0 4px 6px rgba(0,0,0,0.2);
  --shadow-xl: 0 20px 25px rgba(0,0,0,0.4), 0 8px 10px rgba(0,0,0,0.25);
}