/* ================================================================
   SPIES MEDIA GROUP — Design Tokens
   tokens.css
   
   Import this file into your project and reference these variables
   throughout your component styles.
   ================================================================ */

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

:root {

  /* ----------------------------------------------------------------
     COLOR PRIMITIVES
     ---------------------------------------------------------------- */

  /* Volt — Electric Blue (Primary Accent) */
  --volt-100: #D6F0FF;
  --volt-200: #7DD8FF;
  --volt-300: #00AAFF;   /* BRAND PRIMARY */
  --volt-400: #0088DD;
  --volt-500: #0066BB;
  --volt-600: #004A88;

  /* Ink — Dark Backgrounds */
  --ink-0:    #050507;
  --ink-1:    #0A0A0F;
  --ink-2:    #121218;
  --ink-3:    #1A1A24;
  --ink-4:    #22222E;
  --ink-5:    #2E2E3E;

  /* Neutrals */
  --snow:     #FFFFFF;
  --ghost:    #F0F0F4;
  --mist:     #A8A8BC;
  --fog:      #68687C;
  --smoke:    #3C3C50;

  /* Signal — Status Colors */
  --signal-green:  #22D48A;
  --signal-amber:  #F0A030;
  --signal-red:    #F04040;
  --signal-blue:   #3A8CF0;

  /* ----------------------------------------------------------------
     SEMANTIC TOKENS
     ---------------------------------------------------------------- */

  /* Backgrounds */
  --bg-base:          var(--ink-1);
  --bg-surface:       var(--ink-2);
  --bg-elevated:      var(--ink-3);
  --bg-overlay:       var(--ink-4);
  --bg-border:        var(--ink-5);
  --bg-accent:        var(--volt-300);
  --bg-accent-dim:    var(--volt-600);

  /* Foreground / Text */
  --fg-primary:       var(--snow);
  --fg-secondary:     var(--mist);
  --fg-muted:         var(--fog);
  --fg-on-accent:     var(--ink-0);
  --fg-accent:        var(--volt-300);

  /* Borders */
  --border-subtle:    rgba(255, 255, 255, 0.06);
  --border-default:   rgba(255, 255, 255, 0.10);
  --border-strong:    rgba(255, 255, 255, 0.20);
  --border-accent:    var(--volt-300);

  /* Interactive — Buttons */
  --btn-primary-bg:       var(--volt-300);
  --btn-primary-fg:       var(--ink-0);
  --btn-primary-hover:    var(--volt-200);
  --btn-secondary-bg:     var(--ink-4);
  --btn-secondary-fg:     var(--snow);
  --btn-secondary-hover:  var(--ink-5);
  --btn-ghost-hover:      rgba(0, 170, 255, 0.08);

  /* Status */
  --status-success: var(--signal-green);
  --status-warning: var(--signal-amber);
  --status-error:   var(--signal-red);
  --status-info:    var(--signal-blue);

  /* ----------------------------------------------------------------
     TYPOGRAPHY
     ---------------------------------------------------------------- */

  --font-display: 'Syne', sans-serif;
  --font-body:    'DM Sans', sans-serif;
  --font-mono:    'DM Mono', monospace;

  --weight-light:      300;
  --weight-regular:    400;
  --weight-medium:     500;
  --weight-semibold:   600;
  --weight-bold:       700;
  --weight-extrabold:  800;

  /* Size scale */
  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-md:   17px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  32px;
  --text-3xl:  42px;
  --text-4xl:  56px;
  --text-5xl:  76px;

  /* Line heights */
  --leading-tight:   1.05;
  --leading-snug:    1.2;
  --leading-normal:  1.55;
  --leading-relaxed: 1.75;

  /* Letter spacing */
  --tracking-tighter: -0.04em;
  --tracking-tight:   -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.06em;
  --tracking-widest:  0.14em;

  /* ----------------------------------------------------------------
     SPACING — 8px grid
     ---------------------------------------------------------------- */

  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;

  /* ----------------------------------------------------------------
     BORDER RADIUS
     ---------------------------------------------------------------- */

  --radius-sm:   4px;    /* inputs, small chips */
  --radius-md:   8px;    /* buttons, tags */
  --radius-lg:   12px;   /* press mention cards */
  --radius-xl:   20px;   /* testimonial, influencer cards */
  --radius-pill: 100px;  /* badges, pill buttons */

  /* ----------------------------------------------------------------
     SHADOWS
     ---------------------------------------------------------------- */

  --shadow-sm:      0 1px 4px rgba(0, 0, 0, 0.3);
  --shadow-md:      0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg:      0 8px 32px rgba(0, 0, 0, 0.5);
  --shadow-volt:    0 0 24px rgba(0, 170, 255, 0.35);   /* primary button hover */
  --shadow-volt-sm: 0 0 10px rgba(0, 170, 255, 0.25);   /* primary button default */

}