/* ============================================
   IAmGrace Theme — Design Tokens
   Hybrid direction: Roboto (UI/body) + Cormorant Garamond (display)
                     + IAmGrace gold accent #C49A28
   ============================================ */

:root {
  /* -------- Brand Palette -------- */
  --color-primary:           #C49A28;   /* IAmGrace gold */
  --color-primary-light:     #D9B857;
  --color-primary-dark:      #A67F1F;
  --color-primary-contrast:  #FFFFFF;

  --color-secondary:         #1A1A1A;   /* near-black */
  --color-secondary-light:   #2D2D2D;

  /* -------- Neutrals (aligned to iamgrace.it) -------- */
  --color-text:              #212121;
  --color-text-muted:        #777777;
  --color-text-inverse:      #FFFFFF;

  --color-bg:                #FFFFFF;
  --color-bg-soft:           #F7F7F7;
  --color-bg-muted:          #EFEFEF;

  --color-border:            #E0E0E0;
  --color-border-strong:     #ADADAD;

  --color-link:              #0073B6;   /* iamgrace.it default link */
  --color-link-hover:        var(--color-primary);

  /* -------- Status -------- */
  --color-success:           #28A745;
  --color-warning:           #FFC107;
  --color-error:             #DC3545;
  --color-info:              #17A2B8;

  /* -------- Typography -------- */
  --font-family-sans:    'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-family-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-family-base:    var(--font-family-sans);

  /* Scale (modular ~1.25) */
  --font-size-xs:   12px;
  --font-size-sm:   14px;
  --font-size-base: 16px;
  --font-size-md:   18px;
  --font-size-lg:   20px;
  --font-size-xl:   24px;
  --font-size-2xl:  32px;
  --font-size-3xl:  40px;
  --font-size-4xl:  56px;
  --font-size-5xl:  72px;

  --font-weight-light:    300;
  --font-weight-normal:   400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  --line-height-tight:    1.2;
  --line-height-normal:   1.5;
  --line-height-relaxed:  1.75;

  --letter-spacing-tight:  -0.02em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide:   0.05em;
  --letter-spacing-wider:  0.1em;

  /* -------- Spacing -------- */
  --spacing-xs:  0.25rem;
  --spacing-sm:  0.5rem;
  --spacing-md:  1rem;
  --spacing-lg:  1.5rem;
  --spacing-xl:  2rem;
  --spacing-2xl: 3rem;
  --spacing-3xl: 4rem;
  --spacing-4xl: 6rem;

  /* -------- Radius -------- */
  --border-radius-sm:   2px;
  --border-radius-md:   4px;
  --border-radius-lg:   8px;
  --border-radius-xl:   12px;
  --border-radius-full: 9999px;

  /* -------- Shadow -------- */
  --shadow-sm:  0 1px 2px rgba(0,0,0,0.05);
  --shadow-md:  0 4px 8px rgba(0,0,0,0.08);
  --shadow-lg:  0 10px 20px rgba(0,0,0,0.12);
  --shadow-xl:  0 20px 40px rgba(0,0,0,0.18);
  --shadow-gold: 0 4px 14px rgba(196,154,40,0.25);

  /* -------- Motion -------- */
  --transition-fast:   150ms ease-in-out;
  --transition-normal: 300ms ease-in-out;
  --transition-slow:   500ms ease-in-out;

  /* -------- Layout -------- */
  --container-max:  1400px;
  --header-height:  72px;
  --z-header:       1000;
  --z-modal:        2000;

  /* -------- Breakpoints (reference only) -------- */
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --breakpoint-2xl: 1440px;
}