/* alibeharlcsw.com — design tokens.
   The single source of truth for colors, type, spacing, motion, and layout.
   Component CSS in styles.css references these via var(--token). */

:root {
  /* ─────────────────────────────────────────── Colors ── */
  /* Ode palette: warm ivory paper, near-black warm ink, blush-rose and
     pale-blue gradient plumes, dark pills, pale-blue chips. Aura tokens
     feed <ab-aura>. */
  --color-ink: #1b1a17;
  --color-slate-mist: #6e6b63;
  --color-cream: #f7f6f1;
  --color-ice: #efede5;
  --color-charcoal-soft: #232220;
  --color-navy-slate: #232220;
  --color-pure-white: #ffffff;
  --color-pure-black: #000000;
  --color-mist-line: #e6e3da;
  --color-mist-line-soft: #edeae2;
  /* Decorative terracotta — auras, panels, fills that carry no text. */
  --color-brown: #c07a63;
  /* Text-bearing terracotta. Anything with cream type on top uses these:
     #c07a63 is only 3.13:1 against cream, below the 4.5:1 AA floor, so
     surfaces that hold label text step down to -deep (4.76:1). */
  --color-brown-deep: #9e5c47;
  --color-brown-deeper: #864a37;
  --color-chip: #dbe7f2;
  --color-on-chip: #3d5166;

  /* Semantic aliases */
  --color-text: var(--color-ink);
  --color-text-muted: var(--color-slate-mist);
  --color-bg: var(--color-pure-white);
  --color-bg-soft: var(--color-pure-white);
  --color-bg-dark: var(--color-charcoal-soft);
  --color-border: var(--color-mist-line);
  --color-border-soft: var(--color-mist-line-soft);
  --color-accent: #38372f;
  --color-accent-hover: #46443b;
  --color-on-accent: var(--color-cream);
  /* Text-safe accent for links/small accents: slate blue, ≥4.5:1 on ivory. */
  --color-accent-deep: #44586c;
  --color-on-dark: rgba(255, 255, 255, 0.84);
  --color-on-dark-strong: var(--color-pure-white);

  /* Gradients */
  --gradient-deep-sea: linear-gradient(#44586c 45%, #b5cde5 90%);
  --gradient-mono: linear-gradient(180deg, #1b1a17 0%, #3a3833 100%);
  --gradient-blue: linear-gradient(180deg, #dfb7c6 0%, #b5cde5 100%);

  /* Aura art (translucent radial-gradient stops for <ab-aura>) */
  --aura-steel: rgba(223, 170, 191, 0.32);
  --aura-pale: rgba(181, 205, 229, 0.34);
  --aura-ice: rgba(240, 236, 228, 0.9);
  --aura-blush: rgba(228, 190, 170, 0.28);

  /* ─────────────────────────────────────────── Typography ── */
  --font-display: "ABC Otto", "Libre Baskerville", "Fraunces", Baskerville, Georgia, serif;
  --font-body: "Booton", "General Sans", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  /* Font sizes — px scale used across the site. */
  --text-11: 11px;
  --text-12: 12px;
  --text-13: 13px;
  --text-14: 14px;
  --text-15: 15px;
  --text-16: 16px;
  --text-17: 17px;
  --text-18: 18px;
  --text-19: 19px;
  --text-20: 20px;
  --text-21: 21px;
  --text-22: 22px;
  --text-24: 24px;
  --text-26: 26px;
  --text-28: 28px;
  --text-30: 30px;
  --text-32: 32px;
  --text-36: 36px;
  --text-40: 40px;
  --text-44: 44px;
  --text-48: 48px;
  --text-52: 52px;
  --text-56: 56px;
  --text-64: 64px;
  --text-72: 72px;
  --text-80: 80px;
  --text-88: 88px;
  --text-96: 96px;
  --text-112: 112px;
  --text-128: 128px;

  /* Semantic type aliases */
  --text-meta: var(--text-11);
  --text-caption: var(--text-13);
  --text-small: var(--text-14);
  --text-body: var(--text-16);
  --text-subheading: var(--text-21);
  --text-lead: var(--text-21);
  --text-h4: var(--text-22);
  --text-heading-sm: var(--text-28);
  --text-h3: var(--text-28);
  --text-heading: var(--text-40);
  --text-h2: var(--text-40);
  --text-heading-lg: var(--text-56);
  --text-h1: var(--text-56);
  --text-display: var(--text-80);
  --text-display-xl: var(--text-128);

  /* Weights */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  /* Line heights */
  --leading-none: 1;
  --leading-tight: 1.05;
  --leading-snug: 1.15;
  --leading-normal: 1.4;
  --leading-relaxed: 1.5;
  --leading-loose: 1.6;
  --leading-body: 1.47;
  --leading-small: 1.43;
  --leading-subheading: 1.38;
  --leading-heading-sm: 1.14;
  --leading-heading: 1.10;
  --leading-heading-lg: 1.07;
  --leading-display: 1.05;
  --leading-display-xl: 0.95;

  /* Letter spacing */
  --tracking-display-xl: -0.04em;
  --tracking-display: -0.04em;
  --tracking-heading-lg: -0.022em;
  --tracking-subheading: -0.022em;
  --tracking-body: -0.022em;
  --tracking-small: -0.016em;
  --tracking-heading-sm: -0.015em;
  --tracking-heading: -0.015em;
  --tracking-tight: -0.015em;
  --tracking-normal: -0.01em;
  --tracking-zero: 0;
  --tracking-wide: 0.04em;
  --tracking-wider: 0.06em;

  /* ─────────────────────────────────────────── Spacing ── */
  /* 4pt scale — use via padding/margin/gap. */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-9: 36px;
  --space-10: 40px;
  --space-11: 44px;
  --space-12: 48px;
  --space-13: 52px;
  --space-14: 56px;
  --space-16: 64px;
  --space-18: 72px;
  --space-20: 80px;
  --space-22: 88px;
  --space-24: 96px;
  --space-28: 112px;
  --space-30: 120px;
  --space-32: 128px;
  --space-40: 160px;

  /* Semantic spacing */
  --section-gap: 88px;
  --section-gap-lg: 150px;
  --card-padding: var(--space-4);
  --element-gap: var(--space-3);

  /* ─────────────────────────────────────────── Layout ── */
  --container: 1080px;
  --container-wide: 1280px;
  --container-narrow: 880px;
  --content: 800px;
  --content-narrow: 640px;
  --gutter: var(--space-6);
  --nav-height: 68px;
  --title-bar-height: 48px;
  --logo-strip-height: 140px;

  /* Breakpoints (for documentation; CSS uses inline px in @media). */
  --bp-sm: 480px;
  --bp-md: 760px;
  --bp-lg: 900px;
  --bp-xl: 1080px;

  /* ─────────────────────────────────────────── Borders & Radius ── */
  --border: 1px solid var(--color-border);
  --border-soft: 1px solid var(--color-border-soft);
  --border-width: 1px;

  --radius-default: 6px;
  --radius-cards: 12px;
  --radius-buttons: 6px;
  --radius-navigation: 6px;

  /* ─────────────────────────────────────────── Shadows ── */
  --shadow-subtle: rgba(0, 0, 0, 0.11) 0 0 1px 0 inset;
  --shadow-soft: rgba(0, 0, 0, 0.04) 0 4px 24px 0;

  /* ─────────────────────────────────────────── Motion ── */
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 120ms;
  --duration-base: 160ms;
  --duration-slow: 240ms;

  --transition-fast: var(--duration-fast) ease;
  --transition-base: var(--duration-base) ease;
  --transition-slow: var(--duration-slow) var(--ease-out);

  /* ─────────────────────────────────────────── Z-index ── */
  --z-base: 0;
  --z-title-bar: 40;
  --z-nav: 50;
  --z-modal: 100;
}