/* =============================================================================
   TOKENS.CSS — Bullet Design System
   CSS Custom Properties (design tokens)

   Load order: 2nd (after reset)
   Depends on: nothing
   ============================================================================= */

:root {

  /* ---------------------------------------------------------------------------
     Colors
  --------------------------------------------------------------------------- */

  /* Backgrounds */
  --color-bg-primary:      #161616;
  --color-bg-secondary:    #0e0e0e;
  --color-bg-surface:      #1e1e1e;  /* cards, elevated surfaces */
  --color-bg-surface-alt:  #242424;  /* hover state on cards */
  --color-bg-card:         #0B0B0B;  /* card surface (Banking, Blockchain) */
  --color-bg-card-hover:   #1a1a1a;  /* card surface on hover */
  --color-bg-different:    #151515;  /* "What Makes Bullet Different" section */
  --color-bg-footer:       #080808;  /* site footer */
  --color-bg-black:        #000;     /* pure black overlays / manifesto bg */

  /* Text */
  --color-text-primary:    #F8F3E9;
  --color-text-secondary:  #A09B91;  /* muted — captions, labels */
  --color-text-inverse:    #161616;  /* text on accent background */

  /* Accent */
  --color-accent:          #C2F141;
  --color-accent-hover:    #d4ff55;  /* slightly brighter on hover */
  --color-accent-muted:    rgba(194, 241, 65, 0.12); /* tinted bg */

  /* Borders */
  --color-border:          rgba(248, 243, 233, 0.10);
  --color-border-strong:   rgba(248, 243, 233, 0.20);


  /* ---------------------------------------------------------------------------
     Typography
  --------------------------------------------------------------------------- */

  --font-family-base: 'Open Sans', system-ui, -apple-system, sans-serif;

  /* Weights */
  --font-weight-light:           300;
  --font-weight-regular:         400;
  --font-weight-stack-display:   420;  /* Stack Sans Notch variable-font axis */
  --font-weight-medium:          500;
  --font-weight-semibold:        600;
  --font-weight-bold:            700;

  /* Scale — mobile base (scales up in responsive.css) */
  --font-size-xs:    0.75rem;    /*  12px */
  --font-size-sm:    0.875rem;   /*  14px */
  --font-size-base:  1rem;       /*  16px */
  --font-size-md:    1.125rem;   /*  18px */
  --font-size-lg:    1.25rem;    /*  20px */
  --font-size-xl:    1.5rem;     /*  24px */
  --font-size-2xl:   2rem;       /*  32px */
  --font-size-3xl:   2.5rem;     /*  40px */
  --font-size-4xl:   3rem;       /*  48px */
  --font-size-5xl:   3.75rem;    /*  60px */
  --font-size-6xl:   4.5rem;     /*  72px */

  /* Line heights */
  --line-height-tight:   1.1;
  --line-height-snug:    1.3;
  --line-height-normal:  1.5;
  --line-height-relaxed: 1.7;

  /* Letter spacing */
  --letter-spacing-tight:  -0.02em;
  --letter-spacing-normal:  0em;
  --letter-spacing-wide:    0.05em;
  --letter-spacing-wider:   0.1em;


  /* ---------------------------------------------------------------------------
     Spacing scale (base 8)
  --------------------------------------------------------------------------- */

  --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-7:   1.75rem;   /* 28px */
  --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 */
  --space-32:  8rem;      /* 128px */


  /* ---------------------------------------------------------------------------
     Border radius
  --------------------------------------------------------------------------- */

  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;  /* pills, fully rounded */


  /* ---------------------------------------------------------------------------
     Transitions & Easing
  --------------------------------------------------------------------------- */

  --duration-fast:    150ms;
  --duration-base:    250ms;
  --duration-slow:    400ms;
  --duration-slower:  600ms;

  --ease-default:  cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);
  --ease-out:      cubic-bezier(0, 0, 0.2, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);

  --transition-base:   var(--duration-base) var(--ease-default);
  --transition-fast:   var(--duration-fast) var(--ease-default);


  /* ---------------------------------------------------------------------------
     Z-Index scale
  --------------------------------------------------------------------------- */

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


  /* ---------------------------------------------------------------------------
     Layout
  --------------------------------------------------------------------------- */

  --container-max:     1280px;
  --container-narrow:  768px;
  --container-padding: clamp(var(--space-4), 5vw, var(--space-10));

  --header-height:     72px;

  /* Minimum tappable area (WCAG 2.1 AAA target size) */
  --tap-target:        44px;
}