/* tokens.css — freshcardetail design system tokens
   Single source of styling. All colours, spacing, type, radii defined here.
   No hex values or raw sizes outside this file. */

:root {
  /* ── Color Palette ── */
  --color-bg:                  #0E0E0F;
  --color-surface-1:           #1A1A1C;
  --color-surface-2:           #242427;
  --color-surface-light:       #F4F3F0;
  --color-surface-light-card:  #ECEAE5;

  --color-text-primary:        #F0EFE8;
  --color-text-secondary:      #A8A69F;
  --color-text-on-light:       #111112;
  --color-text-secondary-on-light: #5C5A55;

  --color-accent:              #C49A3C;
  --color-accent-hover:        #D4A847;
  --color-accent-muted:        #3D2F0E;

  --color-border:              #2C2C30;
  --color-border-light:        #D8D5CE;

  --color-error:               #E05252;
  --color-success:             #4A9E6A;
  --color-warning:             #C97F2A;
  --color-sold-out:            #6B6864;

  /* ── Semantic Aliases ── */
  --color-btn-primary-bg:      var(--color-accent);
  --color-btn-primary-text:    #0E0E0F;
  --color-btn-primary-hover-bg: var(--color-accent-hover);
  --color-btn-ghost-border:    var(--color-text-primary);
  --color-btn-ghost-text:      var(--color-text-primary);
  --color-btn-ghost-hover-bg:  var(--color-surface-2);
  --color-btn-outline-border:  var(--color-text-on-light);
  --color-btn-outline-text:    var(--color-text-on-light);
  --color-btn-outline-hover-bg: var(--color-text-on-light);
  --color-btn-outline-hover-text: var(--color-surface-light);
  --color-nav-text:            var(--color-text-primary);
  --color-nav-active:          var(--color-accent);
  --color-focus-ring:          var(--color-accent);
  --color-focus-ring-light:    #1A6FBF;

  /* ── Typography Scale ── */
  --text-display-xl:  7.5rem;   /* 120px — hero H1 desktop */
  --text-display-lg:  5rem;     /* 80px — page H1 desktop */
  --text-display-md:  3.5rem;   /* 56px — section H2, stat numbers */
  --text-display-sm:  2.25rem;  /* 36px — H2 mobile, H3 large */
  --text-heading-lg:  1.75rem;  /* 28px */
  --text-heading-md:  1.375rem; /* 22px */
  --text-heading-sm:  1.125rem; /* 18px */
  --text-body-lg:     1.125rem; /* 18px */
  --text-body-md:     1rem;     /* 16px */
  --text-body-sm:     0.875rem; /* 14px */
  --text-eyebrow:     0.75rem;  /* 12px */
  --text-btn:         0.875rem; /* 14px */
  --text-nav:         0.8125rem;/* 13px */
  --text-price-lg:    3rem;     /* 48px */
  --text-price-sm:    1.5rem;   /* 24px */

  /* ── Spacing ── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;
  --space-11: 192px;

  --content-max: 1280px;

  /* ── Border Radii ── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   20px;
  --radius-full: 9999px;

  /* ── Borders ── */
  --border-width:        1px;
  --border-width-accent: 2px;
  --border-default:      1px solid var(--color-border);
  --border-light:        1px solid var(--color-border-light);
  --border-accent:       2px solid var(--color-accent);

  /* ── Shadows ── */
  --shadow-sm:        0 1px 3px rgba(0,0,0,0.4);
  --shadow-md:        0 4px 16px rgba(0,0,0,0.5);
  --shadow-lg:        0 8px 32px rgba(0,0,0,0.6);
  --shadow-amber:     0 0 0 3px var(--color-accent-muted);
  --shadow-focus:     0 0 0 3px var(--color-accent);
  --shadow-focus-light: 0 0 0 3px var(--color-focus-ring-light);

  /* ── Breakpoints (for reference — use in @media) ── */
  --bp-sm:  480px;
  --bp-md:  768px;
  --bp-lg:  1024px;
  --bp-xl:  1280px;
  --bp-2xl: 1536px;
}

/* ── Mobile type scale overrides ── */
@media (max-width: 767px) {
  :root {
    --text-display-xl: 3.5rem;  /* 56px */
    --text-display-lg: 2.5rem;  /* 40px */
    --text-display-md: 2rem;    /* 32px */
  }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}