/* ============================================================
   Webrex Studio — DESIGN TOKENS (single source of truth)
   Every color, font, size, space, radius, motion + shadow value
   used site-wide lives here as a CSS variable. Change a value here
   and it updates everywhere. Do NOT hardcode values in other files.

   Loaded FIRST in every layout (base, base-home, base-apps) so the
   variables are available to styles.css, buttons.css, home.css,
   app-detail.css and about.css.
   ============================================================ */
:root {

  /* ---- Brand — black / white / Webrex blue ---- */
  --w-accent: #4065C3;
  --w-accent-bright: #6182D2;
  --w-accent-soft: #294185;
  --w-black: #000000;
  --w-btn-accent: #6182D2;
  --w-white: #FFFFFF;

  /* ---- Blue shades (formerly green) ---- */
  --w-green-600: #3453A6;
  --w-green-650: #294185;
  --w-green-700: #294185;
  --w-green-750: #1F3163;
  --w-green-800: #152142;

  /* ---- Neutrals ---- */
  --w-neutral-100: #F4F4F4;
  --w-neutral-150: #F0F0F0;
  --w-neutral-200: #EEEEEE;
  --w-neutral-500: #888888;
  --w-neutral-900: #1A1A1A;
  --w-neutral-950: #0A0A0A;

  /* ---- Surfaces / ink / rules ---- */
  --w-ink-dark: #000000;
  --w-ink-light: #FFFFFF;
  --w-ink-muted-dark: #555555;
  --w-ink-muted-light: #B5B5B5;
  --w-rule-dark: #1A1A1A;
  --w-rule-light: #E5E5E5;
  --w-surface-dark: #000000;
  --w-surface-light: #FFFFFF;

  /* ---- Decorative corner rings ---- */
  --w-ring-1: rgba(64, 101, 195, 0.95);
  --w-ring-2: rgba(97, 130, 210, 0.62);
  --w-ring-3: rgba(138, 163, 224, 0.38);
  --w-ring-4: rgba(179, 196, 236, 0.18);

  /* ---- Legacy slate scale ---- */
  --w-slate-100: #F1F5F9;
  --w-slate-200: #E2E8F0;
  --w-slate-300: #CBD5E1;
  --w-slate-50: #F8FAFC;
  --w-slate-500: #64748B;
  --w-slate-600: #475569;
  --w-slate-700: #334155;
  --w-slate-800: #1E293B;
  --w-slate-900: #0F172A;

  /* ---- Legacy gray ---- */
  --w-gray-200: #E5E7EB;
  --w-gray-800: #1F2937;

  /* ---- Legacy blue / teal / emerald / amber ---- */
  --w-amber-800: #92400E;
  --w-blue-500: #3B82F6;
  --w-blue-600: #2563EB;
  --w-emerald-500: #10B981;
  --w-emerald-600: #059669;
  --w-teal-600: #0D9488;

  /* ---- RGBA / overlays ---- */
  --w-rgba-0-0-0-0p04: rgba(0,0,0,0.04);
  --w-rgba-0-0-0-0p07: rgba(0,0,0,0.07);
  --w-rgba-0-0-0-0p08: rgba(0,0,0,0.08);
  --w-rgba-0-0-0-0p1: rgba(0, 0, 0, 0.1);
  --w-rgba-0-0-0-0p26: rgba(0,0,0,0.26);
  --w-rgba-0-0-0-0p28: rgba(0,0,0,0.28);
  --w-rgba-0-0-0-0p3: rgba(0,0,0,0.3);
  --w-rgba-0-0-0-0p34: rgba(0,0,0,0.34);
  --w-rgba-0-0-0-0p35: rgba(0,0,0,0.35);
  --w-rgba-0-0-0-0p38: rgba(0,0,0,0.38);
  --w-rgba-0-0-0-0p4: rgba(0,0,0,0.4);
  --w-rgba-0-0-0-0p48: rgba(0,0,0,0.48);
  --w-rgba-0-0-0-0p55: rgba(0,0,0,0.55);
  --w-rgba-0-0-0-0p62: rgba(0,0,0,0.62);
  --w-rgba-0-0-0-0p72: rgba(0,0,0,0.72);
  --w-rgba-0-0-0-0p76: rgba(0,0,0,0.76);
  --w-rgba-0-0-0-0p80: rgba(0,0,0,0.80);
  --w-rgba-0-0-0-0p92: rgba(0, 0, 0, 0.92);
  --w-rgba-13-148-136-0p25: rgba(13, 148, 136, 0.25);
  --w-rgba-13-148-136-0p3: rgba(13, 148, 136, 0.3);
  --w-rgba-148-163-184-0p25: rgba(148, 163, 184, 0.25);
  --w-rgba-149-191-71-0p1: rgba(97,130,210,0.1);
  --w-rgba-149-191-71-0p18: rgba(97,130,210,0.18);
  --w-rgba-16-185-129-0p5: rgba(16, 185, 129, 0.5);
  --w-rgba-165-180-252-0p35: rgba(165, 180, 252, 0.35);
  --w-rgba-20-184-166-0p3: rgba(20, 184, 166, 0.3);
  --w-rgba-20-184-166-0p4: rgba(20, 184, 166, 0.4);
  --w-rgba-20-184-166-0p8: rgba(20, 184, 166, 0.8);
  --w-rgba-203-213-225-0p25: rgba(203, 213, 225, 0.25);
  --w-rgba-217-70-239-0p5: rgba(217, 70, 239, 0.5);
  --w-rgba-240-171-252-0p35: rgba(240, 171, 252, 0.35);
  --w-rgba-245-158-11-0p12: rgba(245,158,11,0.12);
  --w-rgba-255-255-255-0p01: rgba(255, 255, 255, 0.01);
  --w-rgba-30-58-138-0p4: rgba(30, 58, 138, 0.4);
  --w-rgba-37-99-235-0p2: rgba(37, 99, 235, 0.2);
  --w-rgba-37-99-235-0p25: rgba(37, 99, 235, 0.25);
  --w-rgba-37-99-235-0p3: rgba(37, 99, 235, 0.3);
  --w-rgba-37-99-235-0p9: rgba(37, 99, 235, 0.9);
  --w-rgba-37-99-235-0p95: rgba(37, 99, 235, 0.95);
  --w-rgba-59-130-246-0p05: rgba(59, 130, 246, 0.05);
  --w-rgba-59-130-246-0p2: rgba(59, 130, 246, 0.2);
  --w-rgba-74-124-35-0p12: rgba(41,65,133,0.12);
  --w-rgba-79-70-229-0p9: rgba(79, 70, 229, 0.9);
  --w-rgba-79-70-229-0p95: rgba(79, 70, 229, 0.95);
  --w-rgba-94-234-212-0p3: rgba(94, 234, 212, 0.3);
  --w-rgba-99-102-241-0p5: rgba(99, 102, 241, 0.5);

  /* ---- Radius ---- */
  --w-radius-0p5rem: 0.5rem;
  --w-radius-10px: 10px;
  --w-radius-11px: 11px;
  --w-radius-12px: 12px;
  --w-radius-1p25rem: 1.25rem;
  --w-radius-20px: 20px;
  --w-radius-22px: 22px;
  --w-radius-2px: 2px;
  --w-radius-4px: 4px;
  --w-radius-6px: 6px;
  --w-radius-9999px: 9999px;
  --w-radius-9px: 9px;
  --w-radius-lg: 24px;
  --w-radius-md: 16px;
  --w-radius-pill: 999px;
  --w-radius-sm: 8px;

  /* ---- Motion — durations ---- */
  --w-motion-base: 400ms;
  --w-motion-cinematic: 1800ms;
  --w-motion-fast: 200ms;
  --w-motion-medium: 700ms;
  --w-motion-slow: 1200ms;

  /* ---- Motion — extra durations ---- */
  --w-dur-0p01ms: 0.01ms;
  --w-dur-0p1s: 0.1s;
  --w-dur-0p2s: 0.2s;
  --w-dur-0p3s: 0.3s;
  --w-dur-0p4s: 0.4s;
  --w-dur-0p5s: 0.5s;
  --w-dur-0p6s: 0.6s;
  --w-dur-0p7s: 0.7s;
  --w-dur-0p8s: 0.8s;
  --w-dur-0p9s: 0.9s;
  --w-dur-1000ms: 1000ms;
  --w-dur-130ms: 130ms;
  --w-dur-140ms: 140ms;
  --w-dur-150ms: 150ms;
  --w-dur-180ms: 180ms;
  --w-dur-1p2s: 1.2s;
  --w-dur-1p4s: 1.4s;
  --w-dur-1p8s: 1.8s;
  --w-dur-1s: 1s;
  --w-dur-220ms: 220ms;
  --w-dur-260ms: 260ms;
  --w-dur-280ms: 280ms;
  --w-dur-28s: 28s;
  --w-dur-2p4s: 2.4s;
  --w-dur-2s: 2s;
  --w-dur-300ms: 300ms;
  --w-dur-500ms: 500ms;
  --w-dur-50s: 50s;
  --w-dur-52s: 52s;
  --w-dur-600ms: 600ms;
  --w-dur-60ms: 60ms;
  --w-dur-60s: 60s;
  --w-dur-6s: 6s;
  --w-dur-70s: 70s;
  --w-dur-800ms: 800ms;
  --w-dur-80ms: 80ms;
  --w-dur-80s: 80s;
  --w-dur-900ms: 900ms;

  /* ---- Easing ---- */
  --w-ease-1: cubic-bezier(0.16,1,0.3,1);
  --w-ease-2: cubic-bezier(0.16,1,0.3,1);
  --w-ease-3: cubic-bezier(0.16,1,0.3,1);
  --w-ease-4: cubic-bezier(0.4,0,0.2,1);
  --w-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --w-ease-snap: cubic-bezier(0.65, 0, 0.35, 1);

  /* ---- Font families ---- */
  --w-btn-font: "Poppins", system-ui, sans-serif;
  --w-font-base: "Poppins", ui-sans-serif, system-ui, sans-serif;
  --w-font-body: "Poppins", system-ui, sans-serif;
  --w-font-display: "Poppins", system-ui, sans-serif;
  --w-font-italic: "PP Editorial New", "Fraunces", Georgia, serif;
  --w-font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* ---- Font sizes ---- */
  --w-fs-0p58rem: 0.58rem;
  --w-fs-0p67rem: 0.67rem;
  --w-fs-0p6875rem: 0.6875rem;
  --w-fs-0p75rem: 0.75rem;
  --w-fs-0p78rem: 0.78rem;
  --w-fs-0p7rem: 0.7rem;
  --w-fs-0p8125rem: 0.8125rem;
  --w-fs-0p825rem: 0.825rem;
  --w-fs-0p875rem: 0.875rem;
  --w-fs-0p8rem: 0.8rem;
  --w-fs-0p9375rem: 0.9375rem;
  --w-fs-0p9em: 0.9em;
  --w-fs-0p9rem: 0.9rem;
  --w-fs-1p0625rem: 1.0625rem;
  --w-fs-1p125rem: 1.125rem;
  --w-fs-1p1rem: 1.1rem;
  --w-fs-1p25rem: 1.25rem;
  --w-fs-1p5rem: 1.5rem;
  --w-fs-1p75rem: 1.75rem;
  --w-fs-1p875rem: 1.875rem;
  --w-fs-1rem: 1rem;
  --w-fs-2p25rem: 2.25rem;
  --w-fs-2p5rem: 2.5rem;
  --w-fs-32px: 32px;

  /* ---- Spacing scale ---- */
  --w-space--16px: -16px;
  --w-space--1px: -1px;
  --w-space--48px: -48px;
  --w-space--5px: -5px;
  --w-space-0p5rem: 0.5rem;
  --w-space-0p75rem: 0.75rem;
  --w-space-10px: 10px;
  --w-space-11px: 11px;
  --w-space-12px: 12px;
  --w-space-13px: 13px;
  --w-space-14px: 14px;
  --w-space-16px: 16px;
  --w-space-18px: 18px;
  --w-space-1p5rem: 1.5rem;
  --w-space-1px: 1px;
  --w-space-1rem: 1rem;
  --w-space-20px: 20px;
  --w-space-22px: 22px;
  --w-space-24px: 24px;
  --w-space-28px: 28px;
  --w-space-2px: 2px;
  --w-space-2rem: 2rem;
  --w-space-32px: 32px;
  --w-space-36px: 36px;
  --w-space-3px: 3px;
  --w-space-3rem: 3rem;
  --w-space-46px: 46px;
  --w-space-48px: 48px;
  --w-space-4px: 4px;
  --w-space-4rem: 4rem;
  --w-space-56px: 56px;
  --w-space-5px: 5px;
  --w-space-5rem: 5rem;
  --w-space-6px: 6px;
  --w-space-6rem: 6rem;
  --w-space-7rem: 7rem;
  --w-space-8px: 8px;
  --w-space-8rem: 8rem;
  --w-space-96px: 96px;
  --w-space-9px: 9px;

  /* ---- Shadows ---- */
  --w-shadow-1: 0 8px 32px rgba(0,0,0,0.18);
  --w-shadow-10: 0 1px 8px rgba(0,0,0,0.09);
  --w-shadow-11: 0 20px 40px rgba(0, 0, 0, 0.1);
  --w-shadow-12: 0 25px 50px rgba(0, 0, 0, 0.15);
  --w-shadow-13: 0 10px 30px rgba(0, 0, 0, 0.2);
  --w-shadow-14: 0 20px 40px rgba(0, 0, 0, 0.3);
  --w-shadow-15: 0 4px 15px rgba(59, 130, 246, 0.3);
  --w-shadow-16: 0 8px 25px rgba(59, 130, 246, 0.4);
  --w-shadow-2: none !important;
  --w-shadow-3: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --w-shadow-4: 0 1px 3px 0 rgb(0 0 0 / 0.1);
  --w-shadow-5: 0 4px 20px rgba(0, 0, 0, 0.1);
  --w-shadow-6: 0 2px 12px rgba(0,0,0,0.08);
  --w-shadow-7: 0 12px 32px rgba(0,0,0,0.14);
  --w-shadow-8: 0 30px 90px rgba(0,0,0,0.45);
  --w-shadow-9: 0 24px 64px rgba(0,0,0,0.15), 0 6px 20px rgba(0,0,0,0.07);

  /* ---- Button system ---- */
  --w-btn-ease: cubic-bezier(0.65, 0, 0.35, 1);
  --w-btn-ease-fast: cubic-bezier(0.16, 1, 0.3, 1);
  --w-btn-radius: 999px;

  /* ---- Tailwind bridge: rgb channels (live palettes) ---- */
  --w-primary-50-rgb: 239 246 255;
  --w-primary-100-rgb: 219 234 254;
  --w-primary-200-rgb: 191 219 254;
  --w-primary-300-rgb: 147 197 253;
  --w-primary-400-rgb: 96 165 250;
  --w-primary-500-rgb: 59 130 246;
  --w-primary-600-rgb: 37 99 235;
  --w-primary-700-rgb: 29 78 216;
  --w-primary-800-rgb: 30 64 175;
  --w-primary-900-rgb: 30 58 138;
  --w-primary-950-rgb: 23 37 84;
  --w-secondary-50-rgb: 248 250 252;
  --w-secondary-100-rgb: 241 245 249;
  --w-secondary-200-rgb: 226 232 240;
  --w-secondary-300-rgb: 203 213 225;
  --w-secondary-400-rgb: 148 163 184;
  --w-secondary-500-rgb: 100 116 139;
  --w-secondary-600-rgb: 71 85 105;
  --w-secondary-700-rgb: 51 65 85;
  --w-secondary-800-rgb: 30 41 59;
  --w-secondary-900-rgb: 15 23 42;
  --w-secondary-950-rgb: 2 6 23;
  --w-tw-font-sans: "Poppins", ui-sans-serif, system-ui, sans-serif;
  --w-tw-font-mono: "JetBrains Mono", "Fira Code", Monaco, Consolas, monospace;

  /* ---- Theme cascade (default = light) ---- */
  --w-bg: var(--w-surface-light);
  --w-ink: var(--w-ink-dark);
  --w-ink-muted: var(--w-ink-muted-dark);
  --w-rule: var(--w-rule-light);
  --w-accent-themed: var(--w-accent);
}

[data-theme="dark"] {
  --w-bg: var(--w-surface-dark);
  --w-ink: var(--w-ink-light);
  --w-ink-muted: var(--w-ink-muted-light);
  --w-rule: var(--w-rule-dark);
  --w-accent-themed: var(--w-accent-bright);
}
[data-theme="light"] {
  --w-bg: var(--w-surface-light);
  --w-ink: var(--w-ink-dark);
  --w-ink-muted: var(--w-ink-muted-dark);
  --w-rule: var(--w-rule-light);
  --w-accent-themed: var(--w-accent);
}
section[data-theme] { background: var(--w-bg); color: var(--w-ink); }