/* ============================================================
   T-SPOT GRAPHIC TEE & DESIGN COMPANY
   CSS Custom Properties & Design Tokens
   ============================================================ */

:root {
  /* ── Brand Colors ── */
  --heritage-navy:    #000035;
  --heritage-red:     #990A14;
  --heritage-white:   #FCE3C7;
  --heritage-gold:    #DF9937;
  --powder-blue:      #D5DAEE;

  /* ── Extended Palette ── */
  --navy-mid:         #1B2A4A;
  --navy-light:       #2B3F6B;
  --red-dark:         #6B0710;
  --red-light:        #C41020;
  --gold-light:       #F0B84A;
  --gold-dark:        #A87020;
  --cream:            #F3EBDD;
  --cream-dark:       #E8D8C0;
  --sky-blue:         #7FBDF0;
  --rust:             #B84B2A;
  --ink-black:        #0A0A0A;

  /* ── Neumorphism Shadows (Powder Blue base) ── */
  --neu-bg:           #D5DAEE;
  --neu-shadow-dark:  #aeb4cc;
  --neu-shadow-light: #fcffff;
  --neu-raised:       6px 6px 14px var(--neu-shadow-dark), -6px -6px 14px var(--neu-shadow-light);
  --neu-inset:        inset 4px 4px 10px var(--neu-shadow-dark), inset -4px -4px 10px var(--neu-shadow-light);
  --neu-raised-sm:    3px 3px 8px var(--neu-shadow-dark), -3px -3px 8px var(--neu-shadow-light);
  --neu-raised-lg:    10px 10px 24px var(--neu-shadow-dark), -10px -10px 24px var(--neu-shadow-light);

  /* ── Neumorphism Shadows (Navy base) ── */
  --neu-navy-dark:    #00001e;
  --neu-navy-light:   #000060;
  --neu-navy-raised:  6px 6px 14px var(--neu-navy-dark), -6px -6px 14px var(--neu-navy-light);
  --neu-navy-inset:   inset 4px 4px 10px var(--neu-navy-dark), inset -4px -4px 10px var(--neu-navy-light);

  /* ── Typography ── */
  --font-primary:     'Rockwell', 'Rockwell Nova', 'Courier Bold', Georgia, serif;
  --font-secondary:   'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-accent:      'Dancing Script', 'Brush Script MT', cursive;
  --font-mono:        'Courier New', Courier, monospace;

  /* ── Font Sizes ── */
  --fs-xs:    0.75rem;
  --fs-sm:    0.875rem;
  --fs-base:  1rem;
  --fs-md:    1.125rem;
  --fs-lg:    1.25rem;
  --fs-xl:    1.5rem;
  --fs-2xl:   2rem;
  --fs-3xl:   2.5rem;
  --fs-4xl:   3.25rem;
  --fs-5xl:   4.5rem;
  --fs-hero:  clamp(2.5rem, 7vw, 5.5rem);

  /* ── Spacing ── */
  --space-xs:   0.25rem;
  --space-sm:   0.5rem;
  --space-md:   1rem;
  --space-lg:   1.5rem;
  --space-xl:   2rem;
  --space-2xl:  3rem;
  --space-3xl:  5rem;
  --space-4xl:  8rem;

  /* ── Border Radius ── */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-pill:50px;
  --radius-full:9999px;

  /* ── Transitions ── */
  --transition-fast:   150ms ease;
  --transition-base:   300ms ease;
  --transition-slow:   600ms ease;
  --transition-spring: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Z-Index ── */
  --z-base:    1;
  --z-raised:  10;
  --z-drawer:  100;
  --z-modal:   200;
  --z-nav:     300;
  --z-toast:   400;

  /* ── Layout ── */
  --max-width:      1280px;
  --nav-height:     72px;
  --banner-height:  auto;

  /* ── Borders ── */
  --border-gold:   2px solid var(--heritage-gold);
  --border-red:    2px solid var(--heritage-red);
  --border-navy:   2px solid var(--heritage-navy);
  --border-white:  1px solid rgba(252, 227, 199, 0.3);
}