/* ============================================================
   BLINK DESIGN TOKENS
   Derived from the eye logo asset: cream paper + dark ink
   ============================================================ */

:root {
  /* ── Backgrounds ──────────────────────────────────────────── */
  --bg-base:      #F5F0E8;   /* warm cream — main background       */
  --bg-surface:   #EDE8DF;   /* slightly darker cream for alt rows  */
  --bg-elevated:  #E5E0D7;   /* hover / pressed states              */
  --bg-dark:      #1A1A1A;   /* contrast sections: security, cta    */

  /* ── Brand ────────────────────────────────────────────────── */
  --brand-black:  #1A1A1A;
  --brand-accent: #C4A35A;   /* warm gold — sparingly for highlights */

  /* ── Text ─────────────────────────────────────────────────── */
  --text-primary:   #1A1A1A;
  --text-secondary: #4A4A4A;
  --text-muted:     #8B8272;   /* warm taupe                       */
  --text-light:     #F5F0E8;   /* light text on dark sections       */
  --text-light-secondary: #C4BFB5;

  /* ── Borders ──────────────────────────────────────────────── */
  --border-subtle:  #D5D0C7;
  --border-default: #C4B9A8;
  --border-dark:    #333333;

  /* ── Typography ───────────────────────────────────────────── */
  --font-heading: 'Satoshi', sans-serif;
  --font-body:    'Inter', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  /* Fluid type scale (min 375px → max 1440px) */
  --text-xs:   clamp(0.6875rem, 0.65rem + 0.15vw, 0.8125rem);    /* 11–13 */
  --text-sm:   clamp(0.8125rem, 0.775rem + 0.15vw, 0.9375rem);   /* 13–15 */
  --text-base: clamp(0.9375rem, 0.9rem + 0.15vw, 1.0625rem);     /* 15–17 */
  --text-lg:   clamp(1.125rem, 1.05rem + 0.3vw, 1.375rem);       /* 18–22 */
  --text-xl:   clamp(1.375rem, 1.2rem + 0.7vw, 1.875rem);        /* 22–30 */
  --text-2xl:  clamp(1.75rem, 1.45rem + 1.2vw, 2.75rem);         /* 28–44 */
  --text-3xl:  clamp(2.25rem, 1.8rem + 1.8vw, 3.75rem);          /* 36–60 */
  --text-4xl:  clamp(2.75rem, 2rem + 3vw, 5rem);                  /* 44–80 */

  /* ── Spacing (8px grid) ───────────────────────────────────── */
  --space-1:  0.25rem;   /*  4 */
  --space-2:  0.5rem;    /*  8 */
  --space-3:  0.75rem;   /* 12 */
  --space-4:  1rem;      /* 16 */
  --space-5:  1.5rem;    /* 24 */
  --space-6:  2rem;      /* 32 */
  --space-7:  2.5rem;    /* 40 */
  --space-8:  3rem;      /* 48 */
  --space-9:  4rem;      /* 64 */
  --space-10: 5rem;      /* 80 */
  --space-11: 6rem;      /* 96 */
  --space-12: 8rem;      /* 128 */
  --space-14: 10rem;     /* 160 */

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

  /* ── Easing ───────────────────────────────────────────────── */
  --ease-out:      cubic-bezier(0.33, 1, 0.68, 1);
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth:   cubic-bezier(0.25, 0.1, 0.25, 1);

  /* ── Durations ────────────────────────────────────────────── */
  --duration-fast:   150ms;
  --duration-normal: 300ms;
  --duration-slow:   500ms;

  /* ── Shadows ──────────────────────────────────────────────── */
  --shadow-sm:  0 1px  3px rgba(26, 26, 26, 0.06);
  --shadow-md:  0 4px 12px rgba(26, 26, 26, 0.08);
  --shadow-lg:  0 8px 24px rgba(26, 26, 26, 0.10);
  --shadow-xl:  0 16px 48px rgba(26, 26, 26, 0.12);

  /* ── Z-Index ──────────────────────────────────────────────── */
  --z-cursor:    9999;
  --z-preloader: 9998;
  --z-nav:       1000;
  --z-overlay:    500;
  --z-dropdown:   100;
}