/* ============================================================
   RONIN DEVELOPMENT GROUP — Design Tokens
   Western Luxury · Modern Samurai Honor · Premium Construction
   ============================================================ */

:root {
  /* ── Brand Colors ── */
  --color-black:       #0B0B0B;
  --color-gold:        #C79A5B;
  --color-gold-light:  #D4AD72;
  --color-gold-dark:   #A07A3F;
  --color-copper:      #A45E3D;
  --color-sage:        #7D8B72;
  --color-sage-hover:  #68795E;
  --color-parchment:   #F4EFE5;
  --color-parchment-dark: #E8E0D0;

  /* ── Semantic Roles ── */
  --color-bg:          #0B0B0B;
  --color-bg-alt:      #111111;
  --color-bg-light:    #F4EFE5;
  --color-surface:     #161616;
  --color-surface-2:   #1C1C1C;
  --color-border:      rgba(199,154,91,0.2);
  --color-border-light: rgba(199,154,91,0.12);

  --color-text:        #F4EFE5;
  --color-text-muted:  rgba(244,239,229,0.65);
  --color-text-faint:  rgba(244,239,229,0.35);
  --color-text-dark:   #1A1610;
  --color-text-dark-muted: #4A4035;

  /* CTA — Sage only */
  --color-cta:         #7D8B72;
  --color-cta-hover:   #68795E;
  --color-cta-active:  #56644D;
  --color-cta-text:    #F4EFE5;

  /* ── Typography ── */
  --font-display: 'Cinzel', 'Trajan Pro 3', Georgia, serif;
  --font-body:    'Montserrat', 'Gotham', 'Helvetica Neue', sans-serif;

  /* ── Type Scale (fluid) ── */
  --text-xs:   clamp(0.6875rem, 0.65rem + 0.2vw,  0.75rem);
  --text-sm:   clamp(0.8125rem, 0.78rem + 0.18vw, 0.875rem);
  --text-base: clamp(0.9375rem, 0.9rem  + 0.2vw,  1rem);
  --text-lg:   clamp(1.0625rem, 0.95rem + 0.55vw, 1.25rem);
  --text-xl:   clamp(1.25rem,   1.05rem + 0.85vw, 1.75rem);
  --text-2xl:  clamp(1.5rem,    1.1rem  + 1.5vw,  2.25rem);
  --text-3xl:  clamp(1.875rem,  1.2rem  + 2.25vw, 3rem);
  --text-hero: clamp(2.25rem,   1rem    + 3.75vw, 4rem);

  /* ── Spacing (4px base) ── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 7rem;

  /* ── Layout ── */
  --content-narrow:  640px;
  --content-default: 960px;
  --content-wide:    1200px;
  --content-full:    100%;

  /* ── Radius ── */
  --radius-sm:  0.25rem;
  --radius-md:  0.375rem;
  --radius-lg:  0.5rem;
  --radius-full: 9999px;

  /* ── Transitions ── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --transition: 200ms var(--ease-out);
  --transition-slow: 400ms var(--ease-out);

  /* ── 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 12px 40px rgba(0,0,0,0.6);
  --shadow-gold: 0 0 30px rgba(199,154,91,0.15);

  /* ── Nav height ── */
  --nav-height: 80px;
}