/* 
 * WILL-FI HEADLESS DESIGN SYSTEM
 * Centralized Design Tokens
 * Deployed to: https://ui.will-fi.com/tokens.css
 */

@import url('https://fonts.googleapis.com/css2?family=Bowlby+One&family=Inter:wght@400;500;600;700;800&display=swap');

@layer theme {
  :root {
    /* Graffiti UI Core Overrides */
    --gra-color-primary: #0B2B54;
    --gra-color-accent: #00AEEF;
    --gra-font-family-heading: 'Inter', sans-serif;
    --gra-font-family-base: 'Inter', sans-serif;
    
    /* Will-Fi App Specific Extensions */
    --color-primary: #0B2B54;
    --color-accent: #00AEEF;
    --color-bg: #F8FAFC;
    --color-surface: #FFFFFF;
    --color-surface-translucent: rgba(255, 255, 255, 0.5);
    --color-heading: var(--color-primary);
    --color-text: #1E293B;
    --color-text-light: #64748B;
    --color-border: #E2E8F0;
    --color-danger: #EF4444;
    --color-danger-bg: #FEF2F2;
    --color-danger-text: #991B1B;
    --color-success: #10B981;
    --color-success-bg: #D1FAE5;
    --color-success-text: #065F46;
    --color-warning: #F59E0B;
    --color-warning-bg: #FEF3C7;
    --color-warning-text: #92400E;
    
    --radius: 12px;

    /* Josh Comeau Spring Easing */
    --ease-spring: linear(
      0, 0.009, 0.035 2.1%, 0.141, 0.281 6.7%, 0.723 12.9%, 0.938 16.7%, 1.017,
      1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%,
      1.051 39.6%, 1.017 43.1%, 0.991, 0.977 51%, 0.974 53.8%, 0.975 57.1%,
      0.997 69.8%, 1.003 76.9%, 1
    );
    --ease-squash: linear(0, 0.4, 0.8, 1.1, 1.15, 1.1, 1.02, 0.98, 1, 1);
  }

  [data-theme="dark"] {
    --color-primary: #020617; /* Slate 950 */
    --color-bg: #0F172A; /* Slate 900 */
    --color-surface: #1E293B; /* Slate 800 */
    --color-surface-translucent: rgba(30, 41, 59, 0.5);
    --color-heading: var(--color-text);
    --color-text: #F8FAFC; /* Slate 50 */
    --color-text-light: #94A3B8; /* Slate 400 */
    --color-border: #334155; /* Slate 700 */
    --color-danger: #EF4444;
    --color-danger-bg: #450A0A;
    --color-danger-text: #FECACA;
    --color-success: #10B981;
    --color-success-bg: #064E3B;
    --color-success-text: #A7F3D0;
    --color-warning: #F59E0B;
    --color-warning-bg: #78350F;
    --color-warning-text: #FDE68A;
  }
}