/*
 * tokens.css — TSU design system CSS custom properties.
 * Sourced verbatim from design_reference/colors_and_type.css.
 * Consumed by block theme CSS, React islands, and editor-style.css.
 */

/* ── SELF-HOSTED FONTS ───────────────────────────────────── */
@font-face { font-family: "Poppins"; font-weight: 400; font-style: normal; font-display: swap; src: url('../fonts/poppins/poppins-400.woff2') format('woff2'); }
@font-face { font-family: "Poppins"; font-weight: 500; font-style: normal; font-display: swap; src: url('../fonts/poppins/poppins-500.woff2') format('woff2'); }
@font-face { font-family: "Poppins"; font-weight: 600; font-style: normal; font-display: swap; src: url('../fonts/poppins/poppins-600.woff2') format('woff2'); }
@font-face { font-family: "Poppins"; font-weight: 700; font-style: normal; font-display: swap; src: url('../fonts/poppins/poppins-700.woff2') format('woff2'); }
@font-face { font-family: "Poppins"; font-weight: 800; font-style: normal; font-display: swap; src: url('../fonts/poppins/poppins-800.woff2') format('woff2'); }
@font-face { font-family: "Inter"; font-weight: 400; font-style: normal; font-display: swap; src: url('../fonts/inter/inter-400.woff2') format('woff2'); }
@font-face { font-family: "Inter"; font-weight: 500; font-style: normal; font-display: swap; src: url('../fonts/inter/inter-500.woff2') format('woff2'); }
@font-face { font-family: "Inter"; font-weight: 600; font-style: normal; font-display: swap; src: url('../fonts/inter/inter-600.woff2') format('woff2'); }
@font-face { font-family: "Inter"; font-weight: 700; font-style: normal; font-display: swap; src: url('../fonts/inter/inter-700.woff2') format('woff2'); }
@font-face { font-family: "Cairo"; font-weight: 400; font-style: normal; font-display: swap; src: url('../fonts/cairo/cairo-400.woff2') format('woff2'); }
@font-face { font-family: "Cairo"; font-weight: 600; font-style: normal; font-display: swap; src: url('../fonts/cairo/cairo-600.woff2') format('woff2'); }
@font-face { font-family: "Cairo"; font-weight: 700; font-style: normal; font-display: swap; src: url('../fonts/cairo/cairo-700.woff2') format('woff2'); }
@font-face { font-family: "Cairo"; font-weight: 800; font-style: normal; font-display: swap; src: url('../fonts/cairo/cairo-800.woff2') format('woff2'); }
@font-face { font-family: "IBM Plex Sans Arabic"; font-weight: 400; font-style: normal; font-display: swap; src: url('../fonts/ibm-plex-sans-arabic/ibm-plex-arabic-400.woff2') format('woff2'); }
@font-face { font-family: "IBM Plex Sans Arabic"; font-weight: 500; font-style: normal; font-display: swap; src: url('../fonts/ibm-plex-sans-arabic/ibm-plex-arabic-500.woff2') format('woff2'); }
@font-face { font-family: "IBM Plex Sans Arabic"; font-weight: 600; font-style: normal; font-display: swap; src: url('../fonts/ibm-plex-sans-arabic/ibm-plex-arabic-600.woff2') format('woff2'); }
@font-face { font-family: "IBM Plex Sans Arabic"; font-weight: 700; font-style: normal; font-display: swap; src: url('../fonts/ibm-plex-sans-arabic/ibm-plex-arabic-700.woff2') format('woff2'); }

:root {
  /* ── BRAND EMERALD ────────────────────────────────────── */
  --brand-emerald:        #0E7A4B;
  --brand-emerald-2:      #138A5A;
  --brand-emerald-dark:   #065F46;
  --brand-emerald-tint:   #DDF7EA;
  --brand-emerald-50:     #F0FBF5;
  --brand-emerald-100:    #DDF7EA;
  --brand-emerald-200:    #B6EBCF;
  --brand-emerald-300:    #7FD9AC;
  --brand-emerald-400:    #3DBE83;
  --brand-emerald-500:    #138A5A;
  --brand-emerald-600:    #0E7A4B;
  --brand-emerald-700:    #0A6240;
  --brand-emerald-800:    #065F46;
  --brand-emerald-900:    #044432;

  /* ── NEUTRALS ─────────────────────────────────────────── */
  --ink-900:              #0F172A;
  --ink-800:              #111827;
  --ink-700:              #1F2937;
  --ink-600:              #374151;
  --ink-500:              #4B5563;
  --ink-400:              #6B7280;
  --ink-300:              #9CA3AF;
  --ink-200:              #D1D5DB;
  --ink-100:              #E5E7EB;
  --ink-50:               #F3F4F6;

  --bg-white:             #FFFFFF;
  --bg-soft:              #F8FAFC;
  --bg-dark:              #0F172A;

  --border-default:       #E5E7EB;
  --border-strong:        #D1D5DB;
  --border-on-dark:       rgba(255,255,255,0.10);

  /* ── SEMANTIC ─────────────────────────────────────────── */
  --success:              #10B981;
  --success-tint:         #D1FAE5;
  --warning:              #F59E0B;
  --warning-tint:         #FEF3C7;
  --danger:               #EF4444;
  --danger-tint:          #FEE2E2;
  --info:                 #3B82F6;
  --info-tint:            #DBEAFE;

  --whatsapp:             #25D366;
  --whatsapp-dark:        #128C7E;

  /* ── GOLD ACCENT ──────────────────────────────────────── */
  --gold:                 #C9A861;
  --gold-bright:          #E8C97A;
  --gold-deep:            #8B7A3F;
  --gold-tint:            #FAF3E0;
  --gold-glow:            rgba(201,168,97,0.32);
  --grad-gold:            linear-gradient(135deg, #E8C97A 0%, #C9A861 60%, #8B7A3F 100%);
  --grad-gold-soft:       linear-gradient(135deg, rgba(232,201,122,0.14) 0%, rgba(201,168,97,0.04) 100%);

  /* ── FOREGROUND ───────────────────────────────────────── */
  --fg-1:                 var(--ink-800);
  --fg-2:                 var(--ink-500);
  --fg-3:                 var(--ink-400);
  --fg-on-dark:           #FFFFFF;
  --fg-on-dark-2:         rgba(255,255,255,0.72);
  --fg-on-dark-3:         rgba(255,255,255,0.56);
  --fg-brand:             var(--brand-emerald);

  /* ── GRADIENTS ────────────────────────────────────────── */
  --grad-primary:         linear-gradient(135deg, #0E7A4B 0%, #138A5A 100%);
  --grad-primary-hover:   linear-gradient(135deg, #138A5A 0%, #1AA56A 100%);
  --grad-dark:            linear-gradient(135deg, #0F172A 0%, #111827 100%);
  --grad-hero-overlay:    linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.70) 100%);
  --grad-luxury-glow:     linear-gradient(135deg, rgba(14,122,75,0.15) 0%, rgba(19,138,90,0.05) 100%);
  --grad-text-shine:      linear-gradient(135deg, #FFFFFF 0%, #DDF7EA 100%);
  --grad-emerald-fade:    linear-gradient(180deg, rgba(14,122,75,0.06) 0%, rgba(14,122,75,0) 100%);

  /* ── TYPOGRAPHY ───────────────────────────────────────── */
  --font-display:  "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-body:     "Inter",   -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono:     ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --font-display-ar: "Cairo", "IBM Plex Sans Arabic", "Segoe UI", system-ui, sans-serif;
  --font-body-ar:    "IBM Plex Sans Arabic", "Cairo", "Segoe UI", system-ui, sans-serif;

  --fs-h1:        56px;
  --fs-h2:        42px;
  --fs-h3:        32px;
  --fs-h4:        24px;
  --fs-body-lg:   20px;
  --fs-body:      16px;
  --fs-sm:        14px;
  --fs-xs:        12px;

  --lh-tight:     1.1;
  --lh-snug:      1.25;
  --lh-base:      1.6;
  --lh-relaxed:   1.75;

  --ls-tight:     -0.02em;
  --ls-snug:      -0.01em;
  --ls-normal:    0;
  --ls-wide:      0.02em;
  --ls-eyebrow:   0.14em;

  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-black:     800;

  /* ── SPACING (8px base) ───────────────────────────────── */
  --space-0:   0;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-30:  120px;

  /* ── LAYOUT ───────────────────────────────────────────── */
  --container-max:  1440px;
  --content-max:    1280px;
  --content-narrow: 880px;
  --gutter:         24px;
  --section-pad-y:  120px;

  /* ── RADIUS ───────────────────────────────────────────── */
  --radius-xs:   6px;
  --radius-sm:   10px;
  --radius-md:   14px;   /* buttons, inputs */
  --radius-lg:   20px;
  --radius-xl:   24px;   /* cards */
  --radius-2xl:  32px;
  --radius-pill: 999px;

  /* ── SHADOWS ──────────────────────────────────────────── */
  --shadow-xs:       0 1px 2px rgba(15,23,42,0.04);
  --shadow-sm:       0 2px 6px rgba(15,23,42,0.06);
  --shadow-md:       0 8px 24px rgba(15,23,42,0.08);
  --shadow-lg:       0 18px 48px rgba(15,23,42,0.12);
  --shadow-xl:       0 32px 80px rgba(15,23,42,0.18);
  --shadow-brand:    0 16px 36px rgba(14,122,75,0.28);
  --shadow-brand-lg: 0 24px 56px rgba(14,122,75,0.36);
  --shadow-glass:    0 12px 40px rgba(15,23,42,0.18), inset 0 1px 0 rgba(255,255,255,0.18);
  --shadow-card:     0 4px 16px rgba(15,23,42,0.06), 0 1px 2px rgba(15,23,42,0.04);
  --shadow-card-hover: 0 24px 56px rgba(15,23,42,0.14), 0 2px 4px rgba(15,23,42,0.04);

  /* ── GLASS ────────────────────────────────────────────── */
  --glass-bg-light: rgba(255,255,255,0.72);
  --glass-bg-dark:  rgba(15,23,42,0.55);
  --glass-border:   rgba(255,255,255,0.20);
  --glass-blur:     saturate(160%) blur(20px);

  /* ── MOTION ───────────────────────────────────────────── */
  --ease-out:   cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out:cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:   150ms;
  --dur-base:   220ms;
  --dur-slow:   360ms;
  --dur-page:   560ms;

  /* ── Z-INDEX ──────────────────────────────────────────── */
  --z-base:    1;
  --z-sticky:  100;
  --z-nav:     200;
  --z-overlay: 800;
  --z-modal:   900;
  --z-toast:   1000;
}

/* ── RESPONSIVE TYPE ─────────────────────────────────────── */
@media (max-width: 1024px) {
  :root {
    --fs-h1: 42px;
    --fs-h2: 34px;
    --fs-h3: 28px;
    --fs-h4: 22px;
    --section-pad-y: 80px;
  }
}
@media (max-width: 640px) {
  :root {
    --fs-h1: 34px;
    --fs-h2: 28px;
    --fs-h3: 24px;
    --fs-h4: 20px;
    --section-pad-y: 60px;
    --gutter: 20px;
  }
}