/* ==========================================================================
   ShpLinks Design Tokens
   Three-layer architecture: primitive -> semantic -> component
   ========================================================================== */

:root{
  /* ---- Primitive: brand colors (from logo ribbon) ---- */
  --p-blue-50:  #EAF3FF;
  --p-blue-100: #D3E7FF;
  --p-blue-300: #7DB4FF;
  --p-blue-500: #2B8CFF;
  --p-blue-600: #0B6FE0;
  --p-blue-700: #0A57B3;
  --p-blue-900: #0A3A73;

  --p-green-50:  #E8FBEF;
  --p-green-100: #CFF6DC;
  --p-green-300: #7FE0A0;
  --p-green-500: #3FCB6B;
  --p-green-600: #22B14C;
  --p-green-700: #188A3B;

  --p-gray-0:   #FFFFFF;
  --p-gray-50:  #F7F9FC;
  --p-gray-100: #EEF3FC;
  --p-gray-200: #E2E8F0;
  --p-gray-300: #CBD5E1;
  --p-gray-400: #94A3B8;
  --p-gray-500: #64748B;
  --p-gray-600: #475569;
  --p-gray-700: #334155;
  --p-gray-800: #1E293B;
  --p-gray-900: #0F172A;
  --p-gray-950: #0B1120;

  --p-red-500:  #EF4444;
  --p-amber-500:#F59E0B;

  /* ---- Primitive: spacing (4px base) ---- */
  --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;

  /* ---- Primitive: radius ---- */
  --p-radius-sm: 8px;
  --p-radius-md: 12px;
  --p-radius-lg: 18px;
  --p-radius-xl: 24px;
  --p-radius-full: 999px;

  /* ---- Primitive: motion ---- */
  --p-duration-fast: 150ms;
  --p-duration-normal: 300ms;
  --p-duration-slow: 600ms;
  --p-ease: cubic-bezier(.22,.61,.36,1);

  /* ================= Semantic ================= */
  --color-bg: var(--p-gray-50);
  --color-bg-alt: var(--p-gray-100);
  --color-surface: var(--p-gray-0);
  --color-text: var(--p-gray-900);
  --color-text-soft: var(--p-gray-700);
  --color-text-muted: var(--p-gray-500);
  --color-border: var(--p-gray-200);

  --color-primary: var(--p-blue-600);
  --color-primary-hover: var(--p-blue-700);
  --color-secondary: var(--p-green-600);
  --color-secondary-hover: var(--p-green-700);

  --gradient-brand: linear-gradient(115deg, var(--p-blue-600), var(--p-green-600));
  --gradient-brand-soft: linear-gradient(115deg, rgba(11,111,224,.08), rgba(34,177,76,.08));
  --gradient-brand-strong: linear-gradient(120deg, var(--p-blue-700), var(--p-blue-500) 45%, var(--p-green-500) 75%, var(--p-green-600));

  --shadow-card: 0 1px 2px rgba(15,23,42,.04), 0 8px 24px -12px rgba(15,23,42,.12);
  --shadow-lift: 0 20px 45px -18px rgba(11,111,224,.35);
  --shadow-pop: 0 10px 30px -8px rgba(15,23,42,.18);

  --font-display: 'Sora', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'Roboto Mono', ui-monospace, monospace;

  --container-max: 1180px;
  --header-h: 76px;

  color-scheme: light;
}

/* Dark mode (system) */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --color-bg: var(--p-gray-950);
    --color-bg-alt: #101A2E;
    --color-surface: #111A2B;
    --color-text: var(--p-gray-50);
    --color-text-soft: var(--p-gray-300);
    --color-text-muted: var(--p-gray-400);
    --color-border: #1E2A3F;
    --shadow-card: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.5);
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --color-bg: var(--p-gray-950);
  --color-bg-alt: #101A2E;
  --color-surface: #111A2B;
  --color-text: var(--p-gray-50);
  --color-text-soft: var(--p-gray-300);
  --color-text-muted: var(--p-gray-400);
  --color-border: #1E2A3F;
  --shadow-card: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.5);
  color-scheme: dark;
}