/* ==========================================================================
   Flurto — tokens.css
   SINGLE SOURCE OF TRUTH for every design value.
   base.css / components.css / pages.css must only consume var(--…).
   Light theme only. All values are RTL-agnostic.
   ========================================================================== */

:root {
  /* ----------------------------------------------------------------------
     1. BRAND PALETTE (raw)
     ---------------------------------------------------------------------- */
  --color-coral:          #F5A31C;   /* primary brand — surfaces, blobs, accents */
  --color-coral-300:      #FBC66E;
  --color-coral-400:      #F7B440;   /* primary hover (lighter, keeps dark text AA) */
  --color-coral-600:      #D88A0A;
  --color-coral-700:      #8F5B00;   /* AA-safe behind WHITE text (5.18:1) */
  --color-coral-tint:     #FDEED3;   /* pale wash for badges / icon chips */

  --color-peach:          #FFD08A;
  --color-peach-300:      #FFE3B3;
  --color-peach-tint:     #FFF4E0;

  --color-cream:          #FFFFFF;   /* page background */
  --color-cream-deep:     #FDF4EC;   /* .section--alt background */
  --color-cream-glass:    rgba(255, 255, 255, 0.88); /* blurred sticky navbar */

  --color-plum:           #16224A;   /* ink + footer */
  --color-plum-800:       #0C1533;   /* footer bottom / deepest */
  --color-plum-600:       #3A4568;
  --color-plum-400:       #5B6788;   /* muted body text — 6.3:1 on cream */

  --color-lavender:       #0F9AA3;
  --color-lavender-300:   #DDF1F2;
  --color-lavender-700:   #07666E;   /* AA text/icon tone — 5.2:1 on cream */
  --color-lavender-tint:  #EFF9FA;

  --color-sage:           #0F9AA3;
  --color-sage-300:       #DDF1F2;
  --color-sage-700:       #07666E;   /* AA text/icon tone — 4.8:1 on cream */
  --color-sage-tint:      #EFF9FA;

  --color-berry:          #0C1533;   /* deep gradient stop for the CTA band */
  --color-white:          #FFFFFF;
  --color-black:          #0C1533;

  /* ----------------------------------------------------------------------
     2. SEMANTIC ROLES
     ---------------------------------------------------------------------- */
  --color-bg:             var(--color-cream);
  --color-bg-alt:         #FDF4EC;
  --color-surface:        var(--color-white);
  --color-surface-2:      #FDF6F0;
  --color-surface-sunk:   #F7EFE7;

  --color-ink:            var(--color-plum);        /* 15.9:1 on cream */
  --color-ink-strong:     var(--color-plum-800);
  --color-ink-muted:      var(--color-plum-400);    /*  6.3:1 on cream */
  --color-ink-invert:     var(--color-cream);

  --color-primary:        var(--color-coral);       /* pairs with INK text */
  --color-primary-hover:  var(--color-coral-400);
  --color-primary-deep:   var(--color-coral-700);   /* pairs with WHITE text */
  --color-accent:         var(--color-lavender);
  --color-success:        var(--color-sage);

  --color-border:         #F0E6DC;
  --color-border-strong:  #E4D6C8;
  --color-border-light:   rgba(255, 255, 255, 0.20);
  --color-overlay:        rgba(12, 21, 51, 0.55);

  --color-focus:          #0A7F88;        /* focus ring on light bg */
  --color-focus-invert:   #F7B440;       /* focus ring on dark bg */

  /* Translucent layers used on dark / coral surfaces (footer, CTA band).
     All text tones below clear 5.8:1 against --color-plum. */
  --surface-on-dark:        rgba(255, 255, 255, 0.08);
  --surface-on-dark-hover:  rgba(255, 255, 255, 0.14);
  --surface-on-dark-soft:   rgba(255, 255, 255, 0.10);
  --surface-on-dark-chip:   rgba(255, 255, 255, 0.16);
  --surface-frost:          rgba(255, 255, 255, 0.92);
  --hairline-on-dark:       rgba(255, 255, 255, 0.14);
  --hairline-on-dark-strong: rgba(255, 255, 255, 0.24);
  --border-on-dark:         rgba(255, 255, 255, 0.18);
  --border-on-dark-strong:  rgba(255, 255, 255, 0.55);
  --bezel-highlight:        rgba(255, 255, 255, 0.25);
  --ink-on-dark:            rgba(255, 255, 255, 0.88);
  --ink-on-dark-muted:      rgba(255, 255, 255, 0.72);
  --ink-on-dark-faint:      rgba(255, 255, 255, 0.62);
  --ink-on-coral:           rgba(255, 255, 255, 0.90);
  --sheen-1:                rgba(255, 255, 255, 0.72);
  --sheen-2:                rgba(255, 255, 255, 0.48);

  /* ----------------------------------------------------------------------
     3. GRADIENTS  (blog covers g1..g6, event covers, band, blobs)
     ---------------------------------------------------------------------- */
  --grad-1: #FDECE0;
  --grad-2: #FBE7DC;
  --grad-3: #F6EFE7;
  --grad-4: #FDF4EC;
  --grad-5: #F4F0FA;
  --grad-6: #FCE9DE;

  --grad-event-1: #FDECE0;
  --grad-event-2: #F4F0FA;
  --grad-event-3: #F6EFE7;
  --grad-event-4: #FCE9DE;

  --grad-primary:  #F5A31C;
  --grad-band:     #16224A;
  --grad-hero:     radial-gradient(120% 90% at 85% 0%, var(--color-peach-tint) 0%, rgba(255, 255, 255, 0) 60%),
                   radial-gradient(90% 70% at 0% 20%, var(--color-lavender-tint) 0%, rgba(255, 255, 255, 0) 55%);
  --grad-phone:    #F4F6FB;
  --grad-blob-a:   #FDEED3;
  --grad-blob-b:   #DDF1F2;
  --grad-blob-c:   #F4F6FB;
  --grad-rule:     linear-gradient(90deg, transparent, var(--color-border-strong), transparent);

  /* ----------------------------------------------------------------------
     4. TYPOGRAPHY
     ---------------------------------------------------------------------- */
  --font-latin: "Shabnam", "Segoe UI", Tahoma, system-ui, sans-serif;
  --font-arabic: "Shabnam", "Segoe UI", Tahoma, system-ui, sans-serif;
  --font-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;

  /* --font-body / --font-display are re-pointed for RTL/fa in base.css */
  --font-body:    "Shabnam", "Segoe UI", Tahoma, system-ui, sans-serif;
  --font-display: "Shabnam", "Segoe UI", Tahoma, system-ui, sans-serif;

  /* Fluid scale — fluid between 375px and ~1280px viewports */
  --text-xs:   clamp(0.75rem,  0.727rem + 0.10vw, 0.8125rem);
  --text-sm:   clamp(0.8125rem, 0.784rem + 0.12vw, 0.875rem);
  --text-base: clamp(1rem,     0.972rem + 0.12vw, 1.0625rem);
  --text-md:   clamp(1.0625rem, 1.019rem + 0.19vw, 1.1875rem);
  --text-lg:   clamp(1.1875rem, 1.117rem + 0.30vw, 1.375rem);
  --text-xl:   clamp(1.375rem,  1.261rem + 0.49vw, 1.6875rem);
  --text-2xl:  clamp(1.75rem, 1.52rem + 0.98vw, 2.375rem);
  --text-3xl:  clamp(2.125rem, 1.72rem + 1.73vw, 3.25rem);
  --text-4xl:  clamp(2.5rem, 1.86rem + 2.73vw, 4.25rem);
  --text-hero: clamp(2.5rem, 1.5rem + 4.3vw, 4.5rem);

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 500;
  --weight-bold:     700;
  --weight-extra:    700;

  --leading-tight:   1.06;
  --leading-snug:    1.22;
  --leading-normal:  1.45;
  --leading-relaxed: 1.72;

  --tracking-tight:  -0.015em;
  --tracking-snug:   -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.06em;
  --tracking-caps:   0.10em;

  /* ~65ch of proportional text; the rem cap keeps the line from drifting past
     a comfortable ~70-character measure as the fluid font-size grows. */
  --measure:       min(65ch, 40rem);
  --measure-short: min(46ch, 30rem);

  /* ----------------------------------------------------------------------
     5. SPACING (4px base) + fluid rhythm
     ---------------------------------------------------------------------- */
  --space-0:  0;
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-7:  2rem;
  --space-8:  2.5rem;
  --space-9:  3rem;
  --space-10: 4rem;
  --space-11: 5rem;
  --space-12: 6rem;
  --space-13: 8rem;

  --space-section:      clamp(3.5rem, 2.2rem + 5.2vw, 6.5rem);
  --space-section-tight: clamp(2.5rem, 1.7rem + 3.2vw, 4.25rem);
  --gap-grid:           clamp(0.75rem, 0.5rem + 1.1vw, 1.25rem);
  --gap-grid-lg:        clamp(1rem, 0.7rem + 1.4vw, 1.75rem);

  /* ----------------------------------------------------------------------
     6. LAYOUT
     ---------------------------------------------------------------------- */
  --container-max:   1140px;
  --container-narrow: 780px;
  --container-pad:   clamp(1.125rem, 0.85rem + 1.2vw, 2rem);
  --navbar-h:        72px;
  --navbar-h-mobile: 64px;
  --bp-burger:       860px; /* documented breakpoint — media queries repeat it literally */

  /* ----------------------------------------------------------------------
     7. RADII
     ---------------------------------------------------------------------- */
  --radius-xs:  8px;
  --radius-sm:  12px;
  --radius-md:  16px;
  --radius-lg:  22px;
  --radius-xl:  28px;
  --radius-2xl: 36px;
  --radius-3xl: 40px;
  --radius-pill: 999px;
  --radius-blob-a: 58% 42% 38% 62% / 46% 55% 45% 54%;
  --radius-blob-b: 40% 60% 63% 37% / 62% 38% 62% 38%;
  --radius-blob-c: 66% 34% 45% 55% / 38% 63% 37% 62%;

  /* ----------------------------------------------------------------------
     8. SHADOWS (soft, layered, warm-tinted)
     ---------------------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(22, 34, 74, 0.04);
  --shadow-sm: 0 2px 8px rgba(22, 34, 74, 0.05);
  --shadow-md: 0 6px 20px rgba(22, 34, 74, 0.07);
  --shadow-lg: 0 18px 44px rgba(22, 34, 74, 0.10);
  --shadow-xl: 0 34px 80px rgba(22, 34, 74, 0.13);
  --shadow-coral: 0 8px 22px rgba(245, 163, 28, 0.30);
  --shadow-coral-strong: 0 12px 30px rgba(245, 163, 28, 0.38);
  --shadow-inset-soft: inset 0 0 0 1px rgba(255,255,255,0.6);
  --shadow-ring: 0 0 0 1px var(--color-border);

  /* ----------------------------------------------------------------------
     9. MOTION
     ---------------------------------------------------------------------- */
  --ease-soft:  cubic-bezier(0.77, 0, 0.175, 1);
  --ease-out:   cubic-bezier(0.23, 1, 0.32, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.5, 1);

  --dur-fast: 140ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
  --dur-reveal: 520ms;

  --transition-base:  all var(--dur-base) var(--ease-soft);
  --transition-color: color var(--dur-base) var(--ease-soft),
                      background-color var(--dur-base) var(--ease-soft),
                      border-color var(--dur-base) var(--ease-soft);
  --transition-lift:  transform var(--dur-slow) var(--ease-out),
                      box-shadow var(--dur-slow) var(--ease-out);

  --lift-sm: -3px;
  --lift-md: -6px;
  --lift-lg: -10px;

  /* ----------------------------------------------------------------------
     10. FOCUS / Z-INDEX / MISC
     ---------------------------------------------------------------------- */
  --focus-width:  3px;
  --focus-offset: 3px;

  --z-base:    1;
  --z-raised:  10;
  --z-sticky:  100;
  /* Height of the sticky navbar. main.js measures the real element and
     overwrites this, so sticky offsets stay correct on every breakpoint. */
  --header-h: 72px;
  --z-nav:     200;
  --z-overlay: 500;
  --z-skip:    900;

  --blur-glass: 14px;
  /* --- kāshi additions --- */
  --font-display-fa: "Shabnam", "Segoe UI", Tahoma, system-ui, sans-serif;
  --font-nastaliq: "Shabnam", "Segoe UI", Tahoma, system-ui, sans-serif;
  --color-ink-soft: #3A4568;
  --grout-width: 1px;
  --grout: #F0E6DC;
  --grout-strong: #E4D6C8;
  --firouzeh: #0F9AA3;
  --firouzeh-deep: #07666E;
  --firouzeh-tint: #EFF9FA;
  --amber-deep: #8F5B00;
  --admin-bar-h: 36px;
  /* --- aura: the page is a card floating on warm ground --- */
  --blush: #FDECE0;
  --eyebrow: #C2410C;
}