/* ===============================================
   Padel & Go — Design Tokens
   Single source of truth. Never edit hardcoded
   values elsewhere — reference these variables.
   =============================================== */

:root {
  /* --- Brand Colors --- */
  --pg-black:       #000000;
  --pg-ink:         #111111;
  --pg-ink-2:       #1a1a1a;
  --pg-graphite:    #212529;
  --pg-charcoal:    #333333;

  --pg-lime:        #BAF631;   /* Primary accent */
  --pg-lime-bright: #C8FF00;   /* Punchier variant for card fills */
  --pg-lime-hover:  #A8E02C;   /* Darker hover state */
  --pg-lime-deep:   #9FD928;   /* Gradient companion */

  --pg-white:       #FFFFFF;

  /* --- Neutral scale --- */
  --pg-n-0:    #000000;
  --pg-n-50:   #0a0a0a;
  --pg-n-100:  #141414;
  --pg-n-200:  #1e1e1e;
  --pg-n-300:  #2a2a2a;
  --pg-n-400:  #3a3a3a;
  --pg-n-500:  #6e6e6e;
  --pg-n-600:  #9a9a9a;
  --pg-n-700:  #c4c4c4;
  --pg-n-800:  #e9e9e9;
  --pg-n-900:  #f5f5f5;
  --pg-n-1000: #ffffff;

  /* --- Glass surfaces --- */
  --pg-glass-fill:         rgba(255, 255, 255, 0.08);
  --pg-glass-fill-hover:   rgba(255, 255, 255, 0.12);
  --pg-glass-fill-strong:  rgba(255, 255, 255, 0.15);
  --pg-glass-border:       rgba(255, 255, 255, 0.15);
  --pg-glass-border-strong: rgba(255, 255, 255, 0.25);
  --pg-glass-blur:         20px;

  /* --- Text --- */
  --pg-text-on-dark:        #ffffff;
  --pg-text-on-dark-muted:  rgba(255, 255, 255, 0.70);
  --pg-text-on-dark-dim:    rgba(255, 255, 255, 0.55);
  --pg-text-on-light:       #212529;
  --pg-text-on-light-muted: rgba(51, 51, 51, 0.72);

  /* --- State --- */
  --pg-danger:  #ff4757;
  --pg-success: #27c46b;

  /* --- Typography --- */
  --pg-font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                  'Helvetica Neue', Arial, sans-serif;
  --pg-font-mono: ui-monospace, 'SF Mono', Menlo, monospace;

  /* Type scale */
  --pg-text-xs:   0.75rem;   /* 12px */
  --pg-text-sm:   0.875rem;  /* 14px */
  --pg-text-base: 1rem;      /* 16px */
  --pg-text-md:   1.125rem;  /* 18px */
  --pg-text-lg:   1.25rem;   /* 20px */
  --pg-text-xl:   1.5rem;    /* 24px */
  --pg-text-2xl:  2rem;      /* 32px */
  --pg-text-3xl:  2.5rem;    /* 40px */
  --pg-text-4xl:  3rem;      /* 48px */
  --pg-text-5xl:  3.5rem;    /* 56px — hero */
  --pg-text-6xl:  4.5rem;    /* 72px — oversize display */

  --pg-weight-regular: 400;
  --pg-weight-medium:  500;
  --pg-weight-semi:    600;
  --pg-weight-bold:    700;

  /* --- Border radii --- */
  --pg-radius-xs:   8px;
  --pg-radius-sm:   12px;
  --pg-radius-md:   15px;
  --pg-radius-lg:   20px;
  --pg-radius-xl:   24px;   /* primary card radius */
  --pg-radius-2xl:  32px;
  --pg-radius-pill: 50px;
  --pg-radius-full: 9999px;

  /* --- Spacing (4-pt grid) --- */
  --pg-s-1:  4px;
  --pg-s-2:  8px;
  --pg-s-3:  12px;
  --pg-s-4:  16px;
  --pg-s-5:  20px;
  --pg-s-6:  24px;
  --pg-s-7:  32px;
  --pg-s-8:  40px;
  --pg-s-9:  48px;
  --pg-s-10: 64px;
  --pg-s-11: 80px;
  --pg-s-12: 96px;

  --pg-frame-gap: 20px;

  /* --- Shadows --- */
  --pg-shadow-sm:        0 4px 15px rgba(0, 0, 0, 0.15);
  --pg-shadow-md:        0 8px 25px rgba(0, 0, 0, 0.25);
  --pg-shadow-lg:        0 20px 40px rgba(0, 0, 0, 0.3);
  --pg-shadow-lime:      0 4px 20px rgba(186, 246, 49, 0.40);
  --pg-shadow-lime-hover: 0 8px 28px rgba(186, 246, 49, 0.55);
  --pg-shadow-text:      2px 2px 4px rgba(0, 0, 0, 0.55);

  /* --- Motion --- */
  --pg-ease:     cubic-bezier(0.22, 0.61, 0.36, 1);
  --pg-dur-fast: 150ms;
  --pg-dur-base: 300ms;
  --pg-dur-slow: 500ms;

  /* --- Layout --- */
  --pg-container-max: 1280px;
  --pg-nav-height:    64px;
}

/* ===============================================
   Base Reset
   =============================================== */

*, *::before, *::after { box-sizing: border-box; }