/* ============================================================
   VARIABLES.CSS — rukayatrauf.com
   Design tokens. The single source of truth for the
   visual system. No rules here — only custom properties.

   Load order: variables.css → main.css → components.css
               → utilities.css → [page].css
   ============================================================ */

:root {

  /* ── Backgrounds ─────────────────────────────────────────── */
  --color-bg:         #f7f5f0;   /* Warm cream — primary light background         */
  --color-bg-alt:     #eeeae3;   /* Warm sand — alternate section background      */
  --color-navy:       #0d1f3c;   /* Deep navy — primary dark background & text    */
  --color-navy-hover: #162d52;   /* Lighter navy — hover on navy elements         */
  --color-white:      #ffffff;   /* Pure white — card backgrounds on cream        */

  /* ── Brand accents ───────────────────────────────────────── */
  --color-accent:       #1a56c4;  /* Blue — links, key phrases, active states     */
  --color-accent-light: #dde8fb;  /* Light blue — pill backgrounds, hover fills   */

  /* ── Ratafar Academy (gold — Academy contexts only) ──────── */
  --color-gold:         #b8860b;
  --color-gold-light:   #fdf3d0;

  /* ── Project categories ──────────────────────────────────── */
  --color-teal:         #0e8a7a;  /* Analytics / Marketing projects               */
  --color-teal-light:   #d4f0ec;
  --color-fin:          #b45309;  /* Financial projects                           */
  --color-fin-light:    #fef3c7;
  --color-crm:          #7c3aed;  /* Data Strategy / CRM                          */
  --color-crm-light:    #ede9fe;

  /* ── Text ────────────────────────────────────────────────── */
  --color-text:         #0d1f3c;  /* Primary — same as navy                       */
  --color-text-muted:   #5a6780;  /* Secondary — labels, captions, support text   */
  --color-border:       #d8d2c8;  /* All dividers, card strokes, separators       */

  /* ── Typography families ─────────────────────────────────── */
  --font-display:   'Instrument Serif', Georgia, serif;  /* Belief & voice moments */
  --font-heading:   'Plus Jakarta Sans', sans-serif;     /* Structure & navigation */
  --font-body:      'Montserrat', sans-serif;            /* Explanation & body     */

  /* ── Typographic scale ───────────────────────────────────── */
  /* Display (Instrument Serif italic) */
  --text-display-xl: clamp(2.5rem, 5.5vw, 5rem);    /* Hero statement            */
  --text-display-l:  clamp(2.2rem, 5vw, 4.5rem);    /* Philosophy manifesto      */
  --text-display-m:  clamp(2rem, 3.5vw, 3rem);       /* Inner page hero           */
  --text-display-s:  clamp(1.5rem, 2.5vw, 2.25rem);  /* Academy headline          */

  /* Headings (Plus Jakarta Sans) */
  --text-h1:    clamp(2rem, 3.5vw, 3rem);
  --text-h2:    clamp(1.5rem, 2.5vw, 2rem);
  --text-h3:    1.1rem;
  --text-h4:    0.96rem;

  /* Body (Montserrat) */
  --text-body-l:  0.95rem;
  --text-body:    0.9rem;
  --text-body-s:  0.85rem;
  --text-body-xs: 0.82rem;
  --text-caption: 0.77rem;
  --text-label:   0.7rem;   /* Overlines — always uppercase + tracked             */
  --text-micro:   0.67rem;  /* Pills, badges                                      */

  /* ── Line heights ────────────────────────────────────────── */
  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.75;
  --leading-loose:   1.85;

  /* ── Spacing scale ───────────────────────────────────────── */
  --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-28: 7rem;      /* 112px */

  /* ── Layout ──────────────────────────────────────────────── */
  --max-width:       1100px;   /* Content container                              */
  --max-width-prose: 720px;    /* Editorial text passages                        */
  --px:              2.5rem;   /* Horizontal page padding (desktop)              */
  --px-mobile:       1.25rem;  /* Horizontal page padding (mobile)               */
  --nav-height:      64px;

  /* ── Radii ───────────────────────────────────────────────── */
  --radius-sm:  6px;
  --radius:     10px;    /* Buttons, small cards                                  */
  --radius-md:  14px;    /* Grid cells, venue cells                               */
  --radius-lg:  16px;    /* Standard cards                                        */
  --radius-xl:  20px;    /* Thesis card, large feature cards                      */
  --radius-2xl: 24px;    /* Contact wrap                                          */

  /* ── Shadows ─────────────────────────────────────────────── */
  --shadow-card: 0 8px 32px rgba(13, 31, 60, 0.09);
  --shadow-sm:   0 4px 16px rgba(13, 31, 60, 0.06);

  /* ── Transitions ─────────────────────────────────────────── */
  --transition-fast:   0.2s ease;
  --transition-medium: 0.3s ease;
  --transition-slow:   0.4s ease;

  /* ── Z-index scale ───────────────────────────────────────── */
  --z-nav:     200;
  --z-overlay: 100;
  --z-base:    1;

}