/* =============================================================
   PROJECT PHOENIX — LOVELY JAISWAL WEBSITE
   FILE: assets/css/variables.css
   PURPOSE: Global CSS Custom Properties (Design Tokens)
   All brand values live here. Never hardcode values elsewhere.
   ============================================================= */

:root {

  /* -----------------------------------------------------------
     BRAND COLORS
     ----------------------------------------------------------- */
  --color-primary:          #B08D57;   /* Gold — main brand accent     */
  --color-primary-light:    #C9A96E;   /* Light gold                   */
  --color-primary-dark:     #8C6D3A;   /* Deep gold                    */

  --color-secondary:        #1A1A1A;   /* Near-black — headings / text */
  --color-secondary-light:  #2E2E2E;   /* Dark charcoal                */

  --color-neutral-50:       #FAFAF8;   /* Off-white background         */
  --color-neutral-100:      #F5F3EF;   /* Warm white                   */
  --color-neutral-200:      #EDE9E1;   /* Light warm grey              */
  --color-neutral-300:      #D5CFC3;   /* Mid warm grey                */
  --color-neutral-400:      #A8A095;   /* Muted text                   */
  --color-neutral-500:      #7A7268;   /* Body text light              */
  --color-neutral-600:      #5C5550;   /* Body text                    */
  --color-neutral-700:      #3E3A36;   /* Body text dark               */
  --color-neutral-800:      #2A2622;   /* Near black                   */
  --color-neutral-900:      #1A1714;   /* True dark                    */

  --color-white:            #FFFFFF;
  --color-black:            #000000;
  --color-ink:              #0E0D0B;   /* True luxury dark — footers, CTAs */

  --color-success:          #4A7C59;   /* Success state                */
  --color-error:            #8B3A3A;   /* Error state                  */
  --color-warning:          #B08D57;   /* Warning — reuses primary     */

  /* -----------------------------------------------------------
     TYPOGRAPHY SCALE
     ----------------------------------------------------------- */
  --font-primary:    'Cormorant Garamond', 'Georgia', serif;  /* Display / headings */
  --font-secondary:  'Jost', 'Helvetica Neue', sans-serif;    /* Body / UI          */
  --font-accent:     'Great Vibes', cursive;                  /* Script accent      */
  --font-mono:       'Courier New', monospace;                /* Code / data        */

  /* Type Scale — Major Third (1.250) */
  --text-xs:    0.640rem;   /* 10.24px */
  --text-sm:    0.800rem;   /* 12.80px */
  --text-base:  1.000rem;   /* 16px    */
  --text-md:    1.125rem;   /* 18px    */
  --text-lg:    1.250rem;   /* 20px    */
  --text-xl:    1.563rem;   /* 25px    */
  --text-2xl:   1.953rem;   /* 31.25px */
  --text-3xl:   2.441rem;   /* 39px    */
  --text-4xl:   3.052rem;   /* 48.8px  */
  --text-5xl:   3.815rem;   /* 61px    */
  --text-6xl:   4.768rem;   /* 76.3px  */

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

  /* Line Heights */
  --leading-none:     1;
  --leading-tight:    1.2;
  --leading-snug:     1.35;
  --leading-normal:   1.5;
  --leading-relaxed:  1.65;
  --leading-loose:    1.8;

  /* Letter Spacing */
  --tracking-tighter: -0.03em;
  --tracking-tight:   -0.01em;
  --tracking-normal:   0em;
  --tracking-wide:     0.05em;
  --tracking-wider:    0.1em;
  --tracking-widest:   0.2em;

  /* -----------------------------------------------------------
     SPACING SCALE (8px base grid)
     ----------------------------------------------------------- */
  --space-1:    0.25rem;   /*  4px */
  --space-2:    0.5rem;    /*  8px */
  --space-3:    0.75rem;   /* 12px */
  --space-4:    1rem;      /* 16px */
  --space-5:    1.25rem;   /* 20px */
  --space-6:    1.5rem;    /* 24px */
  --space-8:    2rem;      /* 32px */
  --space-10:   2.5rem;    /* 40px */
  --space-12:   3rem;      /* 48px */
  --space-16:   4rem;      /* 64px */
  --space-20:   5rem;      /* 80px */
  --space-24:   6rem;      /* 96px */
  --space-32:   8rem;      /* 128px */
  --space-40:   10rem;     /* 160px */
  --space-48:   12rem;     /* 192px */

  /* Section Vertical Padding */
  --section-padding-y: var(--space-24);
  --section-padding-x: var(--space-8);

  /* -----------------------------------------------------------
     BORDER
     ----------------------------------------------------------- */
  --border-width-thin:   1px;
  --border-width-base:   2px;
  --border-width-thick:  3px;

  --border-radius-sm:   4px;
  --border-radius-md:   8px;
  --border-radius-lg:   16px;
  --border-radius-xl:   24px;
  --border-radius-full: 9999px;

  --border-color-light:  var(--color-neutral-200);
  --border-color-base:   var(--color-neutral-300);
  --border-color-accent: var(--color-primary);

  /* -----------------------------------------------------------
     SHADOWS
     ----------------------------------------------------------- */
  --shadow-xs:  0 1px 2px  rgba(26, 23, 20, 0.05);
  --shadow-sm:  0 2px 8px  rgba(26, 23, 20, 0.07);
  --shadow-md:  0 4px 20px rgba(26, 23, 20, 0.09);
  --shadow-lg:  0 8px 36px rgba(26, 23, 20, 0.11);
  --shadow-xl:  0 16px 56px rgba(26, 23, 20, 0.14);
  --shadow-gold: 0 6px 28px rgba(176, 141, 87, 0.28);
  --shadow-gold-sm: 0 2px 12px rgba(176, 141, 87, 0.18);

  /* -----------------------------------------------------------
     TRANSITIONS & ANIMATIONS
     ----------------------------------------------------------- */
  --duration-fast:    150ms;
  --duration-base:    250ms;
  --duration-slow:    400ms;
  --duration-slower:  600ms;
  --duration-slowest: 900ms;

  --ease-standard:  cubic-bezier(0.4, 0, 0.2, 1);
  --ease-decelerate: cubic-bezier(0, 0, 0.2, 1);
  --ease-accelerate: cubic-bezier(0.4, 0, 1, 1);
  --ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);

  /* -----------------------------------------------------------
     LAYOUT
     ----------------------------------------------------------- */
  --container-max:   1280px;
  --container-wide:  1440px;
  --container-narrow: 768px;

  --header-height:          136px;
  --header-height-scrolled: 78px;

  /* -----------------------------------------------------------
     Z-INDEX SCALE
     ----------------------------------------------------------- */
  --z-below:    -1;
  --z-base:      0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;

  /* -----------------------------------------------------------
     BREAKPOINTS (for reference in JS — media queries use raw values)
     ----------------------------------------------------------- */
  /* sm: 480px | md: 768px | lg: 1024px | xl: 1280px | 2xl: 1440px */

}