/* =============================================================
   DESIGN TOKENS — single source of truth.
   Loaded BEFORE styles.css / pages.css / modern.css on every page.
   Change a value here → it cascades everywhere.
   =============================================================
   Token naming:
     --color-…   : palette
     --bg-…      : surface backgrounds
     --text-…    : foreground / typography colors
     --rule-…    : borders / dividers
     --space-…   : spacing scale
     --radius-…  : border-radius scale
     --shadow-…  : elevation
     --dur-…     : motion durations
     --ease-…    : motion easings
     --z-…       : z-index scale
     --font-…    : type family
     --fs-…      : type sizes (clamp-based for responsive)
     --fw-…      : type weights
     --lh-…      : line-heights
     --glass-…   : glass material props
   ============================================================= */

:root {
  /* ---------- PALETTE ---------- */
  --color-black:      #0B0B0A;
  --color-ink:        #14110F;
  --color-ink-soft:   #2A2622;
  --color-paper:      #F4F1EA;
  --color-paper-2:    #ECE8DE;
  --color-paper-3:    #E5E0D5;
  --color-white:      #FFFFFF;
  --color-grey-100:   #E5E0D5;
  --color-grey-200:   #D2CCBE;
  --color-grey-300:   #B6B0A2;
  --color-grey-400:   #8E8979;
  --color-grey-500:   #6E6A60;
  --color-grey-700:   #38352F;

  /* ---------- ACCENT (brand teal-sage) ---------- */
  --color-accent:       #6EA7B8;
  --color-accent-soft:  #BFE6D3;
  --color-accent-pale:  #EBF6F8;
  --color-accent-deep:  #4A7E8E;

  /* ---------- STATE ---------- */
  --color-whats:    #25D366;
  --color-success:  #4A7E8E;
  --color-warn:     #C9882A;
  --color-error:    #A03A2A;

  /* ---------- ALIASES (legacy styles.css consumes these) ---------- */
  --black:        var(--color-black);
  --ink:          var(--color-ink);
  --ink-soft:     var(--color-ink-soft);
  --paper:        var(--color-paper);
  --paper-2:      var(--color-paper-2);
  --paper-3:      var(--color-paper-3);
  --white:        var(--color-white);
  --grey-100:     var(--color-grey-100);
  --grey-200:     var(--color-grey-200);
  --grey-300:     var(--color-grey-300);
  --grey-400:     var(--color-grey-400);
  --grey-500:     var(--color-grey-500);
  --grey-700:     var(--color-grey-700);
  --accent:       var(--color-accent);
  --accent-soft:  var(--color-accent-soft);
  --accent-pale:  var(--color-accent-pale);
  --accent-deep:  var(--color-accent-deep);
  --whats:        var(--color-whats);

  /* ---------- BACKGROUND SURFACES ---------- */
  --bg-page:        var(--color-paper);
  --bg-elevated:    var(--color-white);
  --bg-muted:       var(--color-paper-2);
  --bg-inverse:     var(--color-ink);

  /* ---------- TEXT ---------- */
  --text-primary:   var(--color-ink);
  --text-secondary: var(--color-grey-700);
  --text-muted:     var(--color-grey-500);
  --text-inverse:   var(--color-paper);

  /* ---------- RULES / DIVIDERS ---------- */
  --rule:          rgba(20, 17, 15, 0.12);
  --rule-strong:   rgba(20, 17, 15, 0.22);
  --rule-soft:     rgba(20, 17, 15, 0.06);

  /* ---------- SPACING SCALE (8pt grid) ---------- */
  --space-1:  0.25rem;  /* 4px  */
  --space-2:  0.5rem;   /* 8px  */
  --space-3:  0.75rem;  /* 12px */
  --space-4:  1rem;     /* 16px */
  --space-5:  1.5rem;   /* 24px */
  --space-6:  2rem;     /* 32px */
  --space-7:  3rem;     /* 48px */
  --space-8:  4rem;     /* 64px */
  --space-9:  6rem;     /* 96px */

  /* ---------- RADII ---------- */
  --radius-xs:    4px;
  --radius-sm:    8px;
  --radius-md:    12px;
  --radius-lg:    14px;
  --radius-xl:    18px;
  --radius-2xl:   24px;
  --radius-pill:  999px;

  /* ---------- ELEVATION (subtle, paper-friendly) ---------- */
  --shadow-1: 0 1px 2px rgba(20,17,15,0.05);
  --shadow-2: 0 4px 12px -4px rgba(20,17,15,0.08), 0 2px 4px rgba(20,17,15,0.04);
  --shadow-3: 0 10px 28px -10px rgba(20,17,15,0.14), 0 2px 6px rgba(20,17,15,0.05);
  --shadow-4: 0 18px 42px -14px rgba(20,17,15,0.22), 0 4px 12px rgba(20,17,15,0.06);
  --shadow-5: 0 26px 60px -16px rgba(20,17,15,0.30), 0 6px 16px rgba(20,17,15,0.08);
  --shadow-inset-hl: 0 1px 0 rgba(255,255,255,0.6) inset;

  /* ---------- MOTION ---------- */
  --dur-instant:  80ms;
  --dur-fast:     180ms;
  --dur-base:     320ms;
  --dur-slow:     520ms;
  --dur-stretch:  720ms;
  --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out-2: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast: var(--dur-fast) var(--ease-out-soft);
  --t-base: var(--dur-base) var(--ease-out-soft);

  /* ---------- Z-INDEX ---------- */
  --z-base:        1;
  --z-raised:      10;
  --z-sticky:      200;
  --z-fab:         300;
  --z-overlay:     800;
  --z-drawer:      850;
  --z-modal:       900;
  --z-toast:       950;
  --z-tooltip:     980;
  --z-debug:       999;

  /* ---------- TYPOGRAPHY ---------- */
  --font-serif:  'Alyamama', Georgia, 'Times New Roman', serif;
  --font-sans:   'Inter Tight', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-arabic: 'Alyamama', 'Cairo', 'Noto Sans Arabic', system-ui, sans-serif;
  --font-mono:   'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  /* Legacy aliases */
  --serif:  var(--font-serif);
  --sans:   var(--font-sans);
  --arabic: var(--font-arabic);

  /* responsive type scale (clamp) */
  --fs-display-1: clamp(2.4rem, 7.2vw, 5rem);
  --fs-display-2: clamp(2rem, 5.4vw, 3.4rem);
  --fs-display-3: clamp(1.5rem, 3.4vw, 2.2rem);
  --fs-h1: clamp(1.85rem, 5vw, 2.6rem);
  --fs-h2: clamp(1.4rem, 3.4vw, 1.95rem);
  --fs-h3: clamp(1.15rem, 2.4vw, 1.4rem);
  --fs-body: 1rem;
  --fs-lede: clamp(1rem, 1.4vw, 1.12rem);
  --fs-small: 0.86rem;
  --fs-micro: 0.75rem;

  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  --lh-tight: 1.1;
  --lh-snug:  1.25;
  --lh-base:  1.5;
  --lh-relaxed: 1.65;

  /* ---------- LAYOUT ---------- */
  --container-px: clamp(1rem, 3vw, 1.6rem);
  --max-w-narrow: 42rem;
  --max-w-content: 56rem;
  --max-w-wide:   72rem;
  --max-w-app:    80rem;

  /* ---------- GLASS MATERIAL ---------- */
  --glass-blur:        14px;
  --glass-blur-strong: 22px;
  --glass-blur-light:  10px;
  --glass-bg-white:    rgba(255, 255, 255, 0.50);
  --glass-bg-white-hi: rgba(255, 255, 255, 0.62);
  --glass-bg-paper:    rgba(244, 241, 234, 0.62);
  --glass-bg-paper-hi: rgba(244, 241, 234, 0.78);
  --glass-bg-paper-lo: rgba(244, 241, 234, 0.45);
  --glass-bg-ink:      rgba(20, 17, 15, 0.94);
  --glass-border:      rgba(20, 17, 15, 0.08);
  --glass-border-strong: rgba(20, 17, 15, 0.12);
  --glass-shadow:      var(--shadow-3);
  --glass-shadow-lift: var(--shadow-4);

  /* ---------- FAB / FLOATING CHROME ---------- */
  --fab-size:     56px;
  --fab-size-sm:  52px;
  --fab-offset-x: clamp(1rem, 3vw, 1.5rem);
  --fab-offset-y: max(1rem, env(safe-area-inset-bottom, 1rem));
}

/* Dark color-scheme cleanup (we are paper-light only; declare for browsers) */
:root { color-scheme: light; }