/* ==========================================================================
   Joz Social Co — Website 8 — Design Tokens (variables.css)
   ========================================================================== */

:root {
  /* ======================================================================
     COLOR PALETTE
     ====================================================================== */

  /* Core */
  --color-black:           #111111;
  --color-ivory:           #F5F3EF;
  --color-beige:           #D8CFC4;
  --color-gold:            #C6A96B;
  --color-sand:            #E8E2D9;

  /* Gold variants */
  --color-gold-dark:       #A8893F;
  --color-gold-light:      #D4BC82;
  --color-gold-muted:      rgba(198, 169, 107, 0.15);

  /* Neutrals */
  --color-charcoal:        #2A2A2A;
  --color-dark-gray:       #3A3A3A;
  --color-mid-gray:        #888888;
  --color-light-gray:      #CCCCCC;

  /* Semantic backgrounds */
  --bg-primary:            var(--color-ivory);
  --bg-dark:               var(--color-black);
  --bg-card:               #FFFFFF;
  --bg-card-dark:          var(--color-charcoal);
  --bg-sand:               var(--color-sand);

  /* Semantic text */
  --text-primary:          var(--color-black);
  --text-secondary:        #555555;
  --text-muted:            var(--color-mid-gray);
  --text-on-dark:          var(--color-ivory);
  --text-on-dark-muted:    rgba(245, 243, 239, 0.65);

  /* Glass / overlays */
  --glass-bg:              rgba(245, 243, 239, 0.08);
  --glass-border:          rgba(245, 243, 239, 0.12);
  --glass-bg-light:        rgba(255, 255, 255, 0.6);
  --glass-border-light:    rgba(0, 0, 0, 0.06);

  /* ======================================================================
     TYPOGRAPHY
     ====================================================================== */

  --font-display:          'Times New Roman', 'Georgia', serif;
  --font-body:             'Nunito Sans', 'Helvetica Neue', Arial, sans-serif;

  /* Scale */
  --type-xs:               0.75rem;    /* 12px */
  --type-sm:               0.875rem;   /* 14px */
  --type-base:             1rem;       /* 16px */
  --type-lg:               1.125rem;   /* 18px */
  --type-xl:               1.25rem;    /* 20px */
  --type-2xl:              1.5rem;     /* 24px */
  --type-3xl:              2rem;       /* 32px */
  --type-4xl:              2.5rem;     /* 40px */
  --type-5xl:              3.25rem;    /* 52px */
  --type-6xl:              4rem;       /* 64px */
  --type-7xl:              5rem;       /* 80px */

  /* Line heights */
  --lh-tight:              1.1;
  --lh-heading:            1.2;
  --lh-body:               1.6;

  /* Weights */
  --fw-light:              300;
  --fw-regular:            400;
  --fw-medium:             500;
  --fw-semibold:           600;
  --fw-bold:               700;

  /* Letter spacing */
  --ls-tight:              -0.02em;
  --ls-normal:             0;
  --ls-wide:               0.05em;
  --ls-wider:              0.1em;
  --ls-widest:             0.15em;

  /* ======================================================================
     SPACING
     ====================================================================== */

  --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:  8rem;
  --space-40:  10rem;

  /* Section padding */
  --section-padding-sm:    var(--space-12);
  --section-padding-md:    var(--space-20);
  --section-padding-lg:    var(--space-32);

  /* ======================================================================
     LAYOUT
     ====================================================================== */

  --container-sm:          640px;
  --container-md:          768px;
  --container-lg:          1024px;
  --container-xl:          1200px;
  --container-2xl:         1400px;
  --container-gutter:      1.5rem;

  /* Nav */
  --nav-height:            68px;
  --bottom-nav-height:     64px;

  /* ======================================================================
     BORDERS & RADIUS
     ====================================================================== */

  --radius-sm:             4px;
  --radius-md:             8px;
  --radius-lg:             12px;
  --radius-xl:             16px;
  --radius-2xl:            24px;
  --radius-full:           999px;

  /* ======================================================================
     SHADOWS
     ====================================================================== */

  --shadow-sm:             0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md:             0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg:             0 8px 30px rgba(0, 0, 0, 0.12);
  --shadow-xl:             0 20px 60px rgba(0, 0, 0, 0.15);
  --shadow-card:           0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-card-hover:     0 8px 30px rgba(0, 0, 0, 0.12);

  /* ======================================================================
     TRANSITIONS
     ====================================================================== */

  --ease-out:              cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-in-out:           cubic-bezier(0.42, 0, 0.58, 1);
  --transition-fast:       150ms var(--ease-out);
  --transition-base:       250ms var(--ease-out);
  --transition-slow:       400ms var(--ease-out);

  /* ======================================================================
     GRADIENTS
     ====================================================================== */

  --gradient-dark-overlay: linear-gradient(
    180deg,
    rgba(17, 17, 17, 0.3) 0%,
    rgba(17, 17, 17, 0.7) 100%
  );

  --gradient-gold:         linear-gradient(
    135deg,
    var(--color-gold) 0%,
    var(--color-gold-dark) 100%
  );
}