/* ═══════════════════════════════════════════════════════════════════════
   MOREALISHOP — CSS Custom Properties
   Studio Navy · Tungsten Gold · Dark Cinematic
═══════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Colors ─────────────────────────────────────────────────── */
  --color-primary:        #0A1628;   /* Studio Navy */
  --color-secondary:      #1A2438;   /* Console Graphite */
  --color-tertiary:       #2A3447;   /* Slate Mid */
  --color-accent:         #C9A961;   /* Tungsten Gold */
  --color-accent-dim:     #a88b47;   /* Tungsten Gold dimmed */
  --color-accent-2:       #4A6FA5;   /* Broadcast Blue */
  --color-bg-dark:        #050B14;   /* Black Stage */
  --color-bg-light:       #F5F2EB;   /* Paper Off-White */
  --color-text-primary:   #EDEEF0;   /* Bright Key */
  --color-text-secondary: #9BA3B0;   /* Muted Fill */
  --color-text-on-light:  #0A1628;
  --color-border:         #1F2A3D;   /* Border subtle */
  --color-border-bright:  #2A3447;   /* Slightly brighter border */
  --color-success:        #5B8A6E;
  --color-error:          #B2554B;

  /* ── Typography ─────────────────────────────────────────────── */
  --font-heading: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter Tight', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'JetBrains Mono', 'Courier New', Courier, monospace;

  /* ── Font Sizes ─────────────────────────────────────────────── */
  --h1-size:   clamp(2.75rem, 5.5vw, 4.75rem);
  --h2-size:   clamp(2rem,    3.5vw, 3.25rem);
  --h3-size:   1.5rem;
  --body-size: 1rem;
  --small-size: 0.875rem;
  --mono-size:  0.8125rem;

  /* ── Font Weights ────────────────────────────────────────────── */
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;

  /* ── Letter Spacing ─────────────────────────────────────────── */
  --ls-mono:  0.18em;
  --ls-tight: -0.02em;
  --ls-norm:  0;

  /* ── Line Heights ────────────────────────────────────────────── */
  --lh-body:    1.65;
  --lh-heading: 1.1;
  --lh-mono:    1.5;

  /* ── Spacing Scale (8px base) ────────────────────────────────── */
  --sp-1:  0.25rem;   /*  4px */
  --sp-2:  0.5rem;    /*  8px */
  --sp-3:  0.75rem;   /* 12px */
  --sp-4:  1rem;      /* 16px */
  --sp-5:  1.25rem;   /* 20px */
  --sp-6:  1.5rem;    /* 24px */
  --sp-8:  2rem;      /* 32px */
  --sp-10: 2.5rem;    /* 40px */
  --sp-12: 3rem;      /* 48px */
  --sp-16: 4rem;      /* 64px */
  --sp-20: 5rem;      /* 80px */
  --sp-24: 6rem;      /* 96px */
  --sp-32: 8rem;      /* 128px */

  /* ── Shadows ─────────────────────────────────────────────────── */
  --shadow-deep:   0 24px 60px rgba(0, 0, 0, 0.45);
  --shadow-card:   0 8px 24px rgba(0, 0, 0, 0.30);
  --shadow-hover:  0 16px 48px rgba(0, 0, 0, 0.50);
  --shadow-glow:   0 0 30px rgba(201, 169, 97, 0.12);
  --shadow-btn:    0 4px 16px rgba(0, 0, 0, 0.35);

  /* ── Transitions ─────────────────────────────────────────────── */
  --trans-fast: 240ms cubic-bezier(0.4, 0, 0.2, 1);
  --trans-mid:  400ms cubic-bezier(0.4, 0, 0.2, 1);
  --trans-slow: 600ms cubic-bezier(0.4, 0, 0.2, 1);

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

  /* ── Layout ──────────────────────────────────────────────────── */
  --container-max: 1320px;
  --container-md:  1140px;
  --container-sm:  960px;
  --gutter:        clamp(1.25rem, 3vw, 2.5rem);

  /* ── Z-Index Scale ───────────────────────────────────────────── */
  --z-below:    -1;
  --z-base:      0;
  --z-above:     10;
  --z-overlay:   100;
  --z-nav:       500;
  --z-modal:     1000;
  --z-toast:     2000;
  --z-cursor:    9999;
}