/* Variables for all configurations */

:root {

  /* Brand Palette
     Also update BRAND in JS/veylum-config.js */
  --brand-navy:       #2D4059;
  --brand-red:        #EA5455;
  --brand-orange:     #F07B3F;
  --brand-yellow:     #FFD460;
  --brand-gold-pale:  #FFE99A;

  /* Typography */
  --font-fallback:
      system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
      'Helvetica Neue', Arial, 'Noto Sans', sans-serif;

  --font-main: var(--font-fallback);

  --font-display:
      'Cormorant Garamond', 'Cormorant', Garamond, 'Times New Roman',
      Georgia, 'Noto Serif', serif;

  /* Arabic typography */
  --font-main-ar:
      'Noto Kufi Arabic', 'Segoe UI', Tahoma, 'Geeza Pro', 'Arabic Typesetting',
      var(--font-fallback);
  --font-display-ar:
      'Noto Naskh Arabic', 'Traditional Arabic', 'Amiri', 'Noto Kufi Arabic',
      Tahoma, var(--font-fallback);

  /* Type scale */
  --fs-hero:      clamp(3rem, 7vw, 6rem);
  --fs-title:     clamp(2.2rem, 4.5vw, 3.8rem);
  --fs-subtitle:  clamp(1.4rem, 2.6vw, 2rem);
  --fs-lead:      1.05rem;
  --fs-body:      1rem;
  --fs-small:     0.86rem;
  --fs-xsmall:    0.76rem;
  --fs-micro:     0.68rem;
  --fs-logo:      1.65rem;

  --lh-tight:     1.1;
  --lh-normal:    1.6;
  --lh-loose:     1.8;

  --ls-wide:      0.12em;
  --ls-wider:     0.2em;
  --ls-widest:    0.25em;
  --ls-logo:      0.18em;

  /* Surfaces */
  --bg-base:      #07090d;
  --bg-surface:   #111520;
  --bg-sunken:    rgba(0, 0, 0, 0.18);
  --bg-sunken-2:  rgba(0, 0, 0, 0.22);
  --bg-nav:       rgba(7, 9, 13, 0.62);
  --bg-nav-solid: rgba(7, 9, 13, 0.97);
  --bg-footer:    rgba(0, 0, 0, 0.55);
  --bg-overlay:   rgba(0, 0, 0, 0.87);

  /* Cards & Borders */
  --card-bg:      rgba(255, 255, 255, 0.032);
  --card-bg-hov:  rgba(255, 255, 255, 0.058);
  --field-bg:     rgba(255, 255, 255, 0.05);
  --field-bg-foc: rgba(255, 255, 255, 0.075);

  --border:        rgba(255, 255, 255, 0.07);
  --border-soft:   rgba(255, 255, 255, 0.05);
  --border-hover:  rgba(255, 212, 96, 0.28);
  --border-accent: rgba(240, 123, 63, 0.30);

  /* Text */
  --tx-strong: #ffffff;
  --tx1:       #f0e8d8;
  --tx2:       rgba(240, 232, 216, 0.58);
  --tx3:       rgba(240, 232, 216, 0.30);
  /* Small supporting text */
  --tx-hint:   rgba(240, 232, 216, 0.62);
  --tx-link:   var(--brand-yellow);

  /* Feedback colors */
  --ok-fg:     #24bc49;
  --ok-bg:     rgba(36, 188, 73, 0.15);
  --err-fg:    #ff8a8b;
  --err-bg:    rgba(234, 84, 85, 0.14);

  /* Buttons */
  --btn-bg:  var(--brand-yellow);
  --btn-tx:  #07090d;
  --btn-hov: var(--brand-orange);

  /* Effects */
  --grad: linear-gradient(to right,
            var(--brand-red), var(--brand-orange), var(--brand-yellow));
  --glow: rgba(255, 200, 60, 0.17);
  --shadow-btn:  0 8px 32px rgba(240, 123, 63, 0.38);
  --shadow-btn2: 0 10px 40px rgba(240, 123, 63, 0.42);
  --blur-nav:    22px;
  --blur-card:   14px;
  --blur-modal:  8px;

  /* Shape & Space */
  --radius-sm:   2px;
  --radius:      4px;
  --radius-lg:   6px;
  --radius-pill: 100px;

  --wrap-max:    1100px;
  --wrap-narrow: 760px;
  --wrap-form:   500px;

  --space-1:  0.4rem;
  --space-2:  0.7rem;
  --space-3:  1rem;
  --space-4:  1.4rem;
  --space-5:  1.8rem;
  --space-6:  2.4rem;
  --space-7:  3rem;
  --space-8:  4rem;
  --space-9:  7rem;

  --nav-pad-y:   1.25rem;
  --nav-pad-x:   4rem;
  --nav-height:  4.75rem;

  /* Motion */
  --t-fast:   0.2s;
  --t-med:    0.3s;
  --t-slow:   0.85s;
  --ease:     cubic-bezier(0.4, 0, 0.2, 1);

  /* Layering */
  --z-bg:       0;
  --z-content:  1;
  --z-skeleton: 50;
  --z-nav:      100;
  --z-modal:    200;
  --z-skip:     300;

  /* Skeleton UI */
  --skeleton-bg:    rgba(255, 255, 255, 0.045);
  --skeleton-shine: rgba(255, 255, 255, 0.085);
  --skeleton-radius: var(--radius);
  --skeleton-speed: 1.4s;
}

/* RTL Typeface swap */
:root:lang(ar),
[lang="ar"] {
  --font-main:    var(--font-main-ar);
  --font-display: var(--font-display-ar);
  --ls-logo:      0.04em;
  --ls-wide:      0.02em;
  --ls-wider:     0.03em;
  --ls-widest:    0.04em;
}

/* Local webfont - to be added later

@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../Assets/Fonts/CormorantGaramond-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../Assets/Fonts/CormorantGaramond-LightItalic.woff2') format('woff2');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
 */