/* ============================================
   HUKA STUDIO — DESIGN SYSTEM VARIABLES
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700;800;900&display=swap');

:root {

  /* ——— BRAND COLORS ——— */
  --orange:        #E85002;
  --orange-light:  #F16001;
  --orange-mid:    #C10801;
  --orange-dark:   #000000;
  --orange-warm:   #D9C3AB;

  /* ——— NEUTRALS ——— */
  --black:         #000000;
  --dark-gray:     #333333;
  --gray:          #646464;
  --light-gray:    #A7A7A7;
  --white:         #F9F9F9;
  --pure-white:    #ffffff;

  /* ——— SEMANTIC ——— */
  --bg-primary:    #000000;
  --bg-secondary:  #000000;
  --bg-card:       #0a0a0a;
  --bg-card-hover: #101010;
  --border:        rgba(255,255,255,0.07);
  --border-light:  rgba(255,255,255,0.12);
  --border-orange: rgba(232,80,2,0.3);

  /* ——— TEXT ——— */
  --text-primary:   #F9F9F9;
  --text-secondary: #A7A7A7;
  --text-muted:     #646464;
  --text-orange:    #E85002;

  /* ——— GRADIENTS ——— */
  --gradient-orange:     linear-gradient(135deg, #E85002 0%, #C10801 100%);
  --gradient-brand:      linear-gradient(135deg, #000000 0%, #C10801 40%, #F16001 70%, #D9C3AB 100%);
  --gradient-hero:       radial-gradient(ellipse 80% 60% at 50% 110%, rgba(232,80,2,0.45) 0%, rgba(193,8,1,0.2) 40%, transparent 70%);
  --gradient-glow:       radial-gradient(ellipse 60% 40% at 50% 100%, rgba(232,80,2,0.35) 0%, transparent 70%);
  --gradient-section:    radial-gradient(ellipse 100% 60% at 0% 50%, rgba(232,80,2,0.12) 0%, transparent 60%);
  --gradient-card-hover: linear-gradient(135deg, rgba(232,80,2,0.08) 0%, transparent 100%);
  --gradient-text:       linear-gradient(135deg, #F9F9F9 0%, #E85002 60%, #F16001 100%);
  --gradient-noise:      url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");

  /* ——— TYPOGRAPHY ——— */
  --font-display: 'Geist', sans-serif;
  --font-body:    'Geist', sans-serif;

  --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 */
  --text-6xl:  3.75rem;    /* 60px */
  --text-7xl:  4.5rem;     /* 72px */
  --text-8xl:  6rem;       /* 96px */
  --text-9xl:  8rem;       /* 128px */

  /* ——— SPACING ——— */
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-16:  4rem;
  --space-20:  5rem;
  --space-24:  6rem;
  --space-32:  8rem;
  --space-40:  10rem;
  --space-48:  12rem;

  /* ——— LAYOUT ——— */
  --container:     1280px;
  --container-sm:  960px;
  --gutter:        clamp(1.5rem, 5vw, 4rem);

  /* ——— BORDER RADIUS ——— */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-full: 9999px;

  /* ——— SHADOWS ——— */
  --shadow-sm:     0 2px 8px rgba(0,0,0,0.4);
  --shadow-md:     0 8px 24px rgba(0,0,0,0.5);
  --shadow-lg:     0 16px 48px rgba(0,0,0,0.6);
  --shadow-orange: 0 8px 32px rgba(232,80,2,0.25);
  --shadow-orange-lg: 0 16px 64px rgba(232,80,2,0.3);
  --shadow-glow:   0 0 60px rgba(232,80,2,0.2);

  /* ——— TRANSITIONS ——— */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast:   150ms;
  --duration-base:   300ms;
  --duration-slow:   600ms;
  --duration-slower: 1000ms;

  /* ——— Z-INDEX ——— */
  --z-below:   -1;
  --z-base:     0;
  --z-above:    1;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-modal:    300;
  --z-toast:    400;
}