/* G.I.R.L. Design System - Design Tokens
 * ========================================
 * Single source of truth for all design values.
 * Use these variables in both static CSS and reference them in Tailwind config.
 */

/* ==========================================
 * FONTS - Neue Haas Grotesk Display
 * ========================================== */
@font-face {
  font-family: 'Neue Haas';
  src: url('/fonts/NeueHaasGrotDisp-55Roman.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Neue Haas';
  src: url('/fonts/NeueHaasGrotDisp-65Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ==========================================
   * COLORS - Official Brand Palette v1.0
   * Source: Desktop/1. GIRL/Assets/colours.json
   * ========================================== */

  /* Brand Primary - Hot Pink */
  --color-hot-pink: #E54C93;
  --color-light-pink: #F0B5CE;

  /* Brand Blues */
  --color-sky-blue: #62B5E5;
  --color-blue: #2E5DA1;

  /* Accent Colors */
  --color-red: #EF3340;
  --color-yellow: #FFB81C;
  --color-cream: #E8E1D5;

  /* ==========================================
   * LINK COLORS
   * Default: Blue (#2E5DA1) | Hover: Sky Blue (#62B5E5)
   * ========================================== */
  --color-link: var(--color-blue);
  --color-link-hover: var(--color-sky-blue);

  /* Legacy aliases (for backwards compatibility) */
  --color-pink-400: #F0B5CE;
  --color-pink-500: #E54C93;
  --color-pink-600: #D43D82;
  --color-pink-700: #C03574;

  --color-cyan-300: #7DC4ED;
  --color-cyan-400: #62B5E5;
  --color-cyan-500: #4BA6D6;

  /* Neutrals */
  --color-black: #000000;
  --color-gray-900: #0a0a0a;
  --color-gray-800: #1a1a1a;
  --color-gray-700: #333333;
  --color-gray-600: #444444;
  --color-gray-500: #666666;
  --color-gray-400: #888888;
  --color-gray-300: #aaaaaa;
  --color-white: #ffffff;

  /* Semantic Colors - Cream Theme */
  --color-background: var(--color-cream);
  --color-surface: #DDD6C8;
  --color-border: #C5BFB3;
  --color-text-primary: var(--color-black);
  --color-text-secondary: rgba(0, 0, 0, 0.7);
  --color-text-muted: rgba(0, 0, 0, 0.6);
  --color-text-subtle: rgba(0, 0, 0, 0.5);

  /* Accent Color */
  --color-accent: var(--color-red);

  /* ==========================================
   * SPACING SCALE (4px base)
   * ========================================== */
  --space-0: 0;
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */
  --space-24: 6rem;     /* 96px */

  /* ==========================================
   * TYPOGRAPHY
   * ========================================== */

  /* Font Family */
  --font-primary: 'Neue Haas', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Font Sizes - Desktop */
  --text-xs: 0.75rem;     /* 12px */
  --text-sm: 0.875rem;    /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg: 1.125rem;    /* 18px */
  --text-xl: 1.25rem;     /* 20px */
  --text-2xl: 1.5rem;     /* 24px */
  --text-3xl: 1.875rem;   /* 30px */
  --text-4xl: 2.25rem;    /* 36px */
  --text-5xl: 3rem;       /* 48px */

  /* Font Weights */
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  /* Line Heights */
  --leading-none: 1;
  --leading-tight: 1.15;
  --leading-snug: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;

  /* Letter Spacing */
  --tracking-tight: -0.025em;
  --tracking-normal: 0;
  --tracking-wide: 0.05em;
  --tracking-wider: 0.1em;
  --tracking-widest: 0.15em;

  /* ==========================================
   * BORDER RADIUS
   * ========================================== */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-full: 9999px;

  /* ==========================================
   * SHADOWS
   * ========================================== */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);

  /* ==========================================
   * TRANSITIONS
   * ========================================== */
  --transition-fast: 150ms ease;
  --transition-normal: 200ms ease;
  --transition-slow: 300ms ease;

  /* ==========================================
   * Z-INDEX SCALE
   * ========================================== */
  --z-base: 0;
  --z-dropdown: 10;
  --z-sticky: 20;
  --z-fixed: 30;
  --z-modal-backdrop: 40;
  --z-modal: 50;
  --z-popover: 60;
  --z-tooltip: 70;
  --z-max: 100;

  /* ==========================================
   * COMPONENT-SPECIFIC TOKENS
   * ========================================== */

  /* Logo */
  --logo-height-desktop: clamp(32px, 2.4vw, 100px);
  --logo-height-mobile: clamp(32px, 9vw, 50px);
  --logo-top-desktop: var(--space-8);
  --logo-top-mobile: var(--space-6);

  /* Footer */
  --footer-text-desktop: var(--text-xs);
  --footer-text-mobile: 0.6rem;

  /* ==========================================
   * BREAKPOINTS (for reference)
   * ========================================== */
  /* --bp-sm: 640px;  */
  /* --bp-md: 768px;  */
  /* --bp-lg: 1024px; */
  /* --bp-xl: 1280px; */
}

/* ==========================================
 * MOBILE OVERRIDES (max-width: 900px)
 * ========================================== */
@media (max-width: 900px) {
  :root {
    /* Mobile Typography - slightly smaller */
    --text-xs: 0.625rem;    /* 10px */
    --text-sm: 0.75rem;     /* 12px */
    --text-base: 0.875rem;  /* 14px */
    --text-lg: 1rem;        /* 16px */
    --text-xl: 1.125rem;    /* 18px */
    --text-2xl: 1.25rem;    /* 20px */
    --text-3xl: 1.5rem;     /* 24px */
    --text-4xl: 1.75rem;    /* 28px */

    /* Mobile Spacing - tighter */
    --space-section: var(--space-6);
    --space-content: var(--space-4);
  }
}

/* Desktop spacing defaults */
@media (min-width: 901px) {
  :root {
    --space-section: var(--space-8);
    --space-content: var(--space-6);
  }
}