/* ============================================================
   FLiiP Design Tokens
   ============================================================ */

:root {
  /* Brand Colors */
  --c-blue:       #0B83FA;
  --c-blue-dark:  #1568BA;
  --c-blue-deep:  #0A4A8C;
  --c-sky:        #1FBEFC;   /* DECORATIVE ONLY — fails WCAG AA on white */
  --c-sky-soft:   #D8E5EE;

  /* Neutrals */
  --c-ink:        #161719;
  --c-ink-soft:   #2A2C30;
  --c-gray-700:   #4B5258;
  --c-gray-500:   #8C969B;
  --c-gray-300:   #C8CDD1;
  --c-gray-200:   #E6E9EC;
  --c-gray-100:   #F5F7F9;
  --c-white:      #FFFFFF;

  /* Semantic */
  --c-success:    #1BAA6C;
  --c-warning:    #E2A33B;
  --c-danger:     #D6463C;

  /* Typography */
  --font:         'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

  /* Type Scale */
  --sz-eyebrow:   0.75rem;   /* 12px */
  --sz-xs:        0.8125rem; /* 13px */
  --sz-sm:        0.875rem;  /* 14px */
  --sz-base:      1rem;      /* 16px */
  --sz-lead:      1.25rem;   /* 20px */
  --sz-h4:        1.25rem;   /* 20px */
  --sz-h3:        1.75rem;   /* 28px */
  --sz-h2:        2.5rem;    /* 40px */
  --sz-h1:        4rem;      /* 64px */
  --sz-display:   5.5rem;    /* 88px */
  --sz-display-xl: 7rem;     /* 112px — hero only */

  /* Line Heights */
  --lh-tight:     1.05;
  --lh-snug:      1.2;
  --lh-normal:    1.5;
  --lh-relaxed:   1.6;

  /* Letter Spacing */
  --ls-tight:     -0.03em;
  --ls-snug:      -0.02em;
  --ls-normal:    -0.01em;
  --ls-wide:      0.06em;
  --ls-eyebrow:   0.12em;

  /* 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 */

  /* Border Radius */
  --r-sm:   0.375rem;  /* 6px */
  --r-md:   0.5rem;    /* 8px */
  --r-lg:   0.75rem;   /* 12px */
  --r-xl:   1rem;      /* 16px */
  --r-2xl:  1.5rem;    /* 24px */
  --r-3xl:  2rem;      /* 32px */
  --r-full: 9999px;

  /* Border Radius — long-form aliases */
  --radius-sm:  var(--r-sm);
  --radius-md:  var(--r-md);
  --radius-lg:  var(--r-lg);
  --radius-xl:  var(--r-xl);
  --radius-2xl: var(--r-2xl);
  --radius-3xl: var(--r-3xl);

  /* Shadows */
  --shadow-sm:  0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md:  0 4px 6px -1px rgb(0 0 0 / 0.08), 0 2px 4px -1px rgb(0 0 0 / 0.05);
  --shadow-lg:  0 10px 15px -3px rgb(0 0 0 / 0.08), 0 4px 6px -2px rgb(0 0 0 / 0.04);
  --shadow-xl:  0 20px 25px -5px rgb(0 0 0 / 0.08), 0 10px 10px -5px rgb(0 0 0 / 0.03);
  --shadow-blue: 0 8px 32px -4px rgb(11 131 250 / 0.35);
  --shadow-blue-lg: 0 20px 60px -10px rgb(11 131 250 / 0.4);

  /* Layout */
  --max-w:        75rem;   /* 1200px */
  --max-w-wide:   80rem;   /* 1280px */
  --max-w-narrow: 44rem;   /* 704px */

  /* Breakpoints (reference, not usable in CSS var) */
  /* --bp-sm: 640px | --bp-md: 768px | --bp-lg: 1024px | --bp-xl: 1280px */

  /* Transitions */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
  --dur-fast:   150ms;
  --dur-base:   250ms;
  --dur-slow:   400ms;
  --dur-reveal: 600ms;

  /* Z-index */
  --z-below:    -1;
  --z-base:      0;
  --z-raised:    10;
  --z-dropdown:  100;
  --z-sticky:    200;
  --z-overlay:   300;
  --z-modal:     400;
  --z-toast:     500;
}