/* ============================================================
   EYE LOVE FRAMES — DESIGN TOKENS
   All brand values live here. Never hardcode hex outside :root.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&display=swap');

:root {
  /* ── Colour Palette ── */
  --color-primary-light:   #F8AEB0;
  --color-primary-dark:    #F26E6B;
  --color-primary-glow:    rgba(248, 174, 176, 0.15);
  --color-primary-glow-md: rgba(248, 174, 176, 0.30);
  --color-primary-glow-lg: rgba(248, 174, 176, 0.50);

  --color-bg:              #0D1B2A;
  --color-bg-mid:          #122236;
  --color-bg-raised:       #172c45;
  --color-bg-overlay:      rgba(13, 27, 42, 0.85);
  --color-bg-overlay-deep: rgba(13, 27, 42, 0.92);

  --color-white:           #FFFFFF;
  --color-text-muted:      #B0BEC5;
  --color-text-dim:        #7A99B2;
  --color-border:          rgba(248, 174, 176, 0.12);
  --color-border-hover:    rgba(248, 174, 176, 0.40);
  --color-success:         #4CAF7D;
  --color-error:           #F26E6B;

  /* ── Gradient ── */
  --gradient-brand:        linear-gradient(90deg, #F8AEB0 0%, #F26E6B 100%);
  --gradient-hero-overlay: linear-gradient(to bottom, rgba(13,27,42,0.55) 0%, rgba(13,27,42,0.90) 100%);
  --gradient-card-hover:   linear-gradient(135deg, rgba(248,174,176,0.05) 0%, rgba(242,110,107,0.05) 100%);

  /* ── Typography ── */
  --font-display:  'Syne', sans-serif;
  --font-heading:  'Syne', sans-serif;
  --font-body:     'DM Sans', system-ui, sans-serif;

  /* ── Font Sizes (fluid clamp) ── */
  --fs-xs:      0.6875rem;   /* 11px */
  --fs-sm:      0.8125rem;   /* 13px */
  --fs-base:    1rem;        /* 16px */
  --fs-md:      1.125rem;    /* 18px */
  --fs-lg:      1.25rem;     /* 20px */
  --fs-xl:      1.5rem;      /* 24px */
  --fs-2xl:     2rem;        /* 32px */
  --fs-3xl:     2.5rem;      /* 40px */
  --fs-4xl:     3.25rem;     /* 52px */
  --fs-display: clamp(3rem, 7vw, 5.5rem);   /* Hero H1 */

  /* ── Letter Spacing ── */
  --ls-tight:   -0.02em;
  --ls-normal:  0;
  --ls-wide:    0.08em;
  --ls-wider:   0.15em;
  --ls-widest:  0.25em;

  /* ── Line Height ── */
  --lh-tight:   1.1;
  --lh-snug:    1.3;
  --lh-normal:  1.5;
  --lh-relaxed: 1.7;

  /* ── Spacing Scale ── */
  --sp-1:    0.25rem;   /* 4px  */
  --sp-2:    0.5rem;    /* 8px  */
  --sp-3:    0.75rem;   /* 12px */
  --sp-4:    1rem;      /* 16px */
  --sp-5:    1.25rem;   /* 20px */
  --sp-6:    1.5rem;    /* 24px */
  --sp-7:    1.75rem;   /* 28px */
  --sp-8:    2rem;      /* 32px */
  --sp-10:   2.5rem;    /* 40px */
  --sp-12:   3rem;      /* 48px */
  --sp-16:   4rem;      /* 64px */
  --sp-20:   5rem;      /* 80px */
  --sp-24:   6rem;      /* 96px */
  --sp-32:   8rem;      /* 128px */

  /* ── Radius ── */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  16px;
  --radius-xl:  24px;

  /* ── Shadows ── */
  --shadow-sm:   0 2px 8px rgba(0,0,0,0.3);
  --shadow-md:   0 4px 24px rgba(0,0,0,0.4);
  --shadow-lg:   0 8px 48px rgba(0,0,0,0.5);
  --shadow-glow: 0 0 32px rgba(248,174,176,0.18);
  --shadow-card-hover: 0 8px 40px rgba(0,0,0,0.5), 0 0 0 1px rgba(248,174,176,0.30);

  /* ── Transitions ── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:    180ms;
  --dur-base:    300ms;
  --dur-slow:    600ms;

  /* ── Layout ── */
  --container-max: 1280px;
  --container-xl:  1440px;
  --nav-height:    88px;

  /* ── Z-index layers ── */
  --z-base:    1;
  --z-raised:  10;
  --z-overlay: 50;
  --z-nav:     100;
  --z-modal:   200;
  --z-toast:   300;
}