/* ════════════════════════════════════════════════════════════════════════
   Omerica Studios — design tokens (Atlas rebuild, 2026-08-16)
   THE one brand :root. Every value states the final computed result of the
   old colors_and_type → omerica → teal-theme cascade, WCAG-verified on its
   intended surface (ratios noted). No legacy aliases; if a page needs a
   color, it uses one of these names.
   Palette story = the OS logo's tech beach: parchment sand, teal ocean,
   brass-gold sunset, forest palm.
   ════════════════════════════════════════════════════════════════════════ */
:root {
  /* ── Surfaces ── */
  --surface-page: #eef9f6;      /* parchment sand, page default */
  --surface-card: #ffffff;      /* paper plate: cards, nav drawer */
  --surface-card-alt: #dff2ec;  /* secondary plate, zebra rows */
  --surface-input: #ffffff;     /* form fields */
  --surface-dark: #0c5a6d;      /* teal ocean: stats, subpage hero bands */
  --surface-dark-2: #0d6377;    /* forest: nav band, footer, contact */
  --surface-brand-cta: #0e7c5b; /* green fills, ok state */

  /* ── Ink on light surfaces ── */
  --text-strong: #0b333d;       /* 12.7:1 on page */
  --text-body: #1f4e58;         /* 7.7:1 on page */
  --text-muted: #4e6a66;        /* 4.6:1 on page, 5.1 on card */
  --text-muted-warm: #4e6a66;   /* 6.2:1 — warm variant (private-ai) */

  /* ── Ink on dark surfaces ── */
  --text-on-dark: #ffffff;        /* 9.0:1 on teal, 12.5 on forest */
  --text-on-dark-muted: #d8ecf0;  /* 5.5:1 on teal, 8.0 on forest */
  --accent-on-dark: #ffd34d;      /* 6.2:1 on teal, 9.0 on forest */

  /* ── Accents ── */
  --accent: #14a3b8;          /* brass sunset — borders/ornament ONLY (3.1:1) */
  --accent-ink: #0d6e7d;      /* brass as text: eyebrows, labels (6.2:1) */
  --accent-gold: #ffd34d;     /* gilt — text on forest only (6.0:1 there) */
  --link: #0c7086;            /* inline links, underlined (6.0:1) */
  --focus-ring: #0c5a6d;      /* universal 2px outline + 2px offset (8.1:1) */

  /* ── Semantic states (ink / tint) ── */
  --status-ok: #0e7c5b;    --status-ok-tint: #dcf2e7;   /* 6.3 on tint */
  --status-warn: #8a6400;  --status-warn-tint: #fdf3d0; /* 4.9 on tint */
  --status-err: #b03050;   --status-err-tint: #fde3ea;  /* 7.2 on tint */

  /* ── Hairlines & frames ── */
  --border-soft: rgba(20, 163, 184, 0.35);
  --border-strong: rgba(20, 163, 184, 0.65);
  --border-functional: #14a3b8; /* inputs, real boundaries (3.1:1) */

  /* ── Type: 3 roles ── */
  --font-display: 'Cinzel', 'Cormorant Garamond', Georgia, serif;
  --font-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body: 'EB Garamond', Georgia, 'Times New Roman', serif;
  --font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --fs-hero: clamp(2.5rem, 6.4vw, 4.9rem);
  --fs-h1: clamp(2.2rem, 5vw, 3.4rem);
  --fs-h2: clamp(1.8rem, 3.4vw, 2.5rem);
  --fs-h3: 1.375rem;
  --fs-h4: 1.0625rem;
  --fs-body: 17px;           /* EB Garamond runs optically small */
  --lh-body: 1.65;
  --fs-ui: 15px;
  --fs-meta: 13px;
  --fs-chip: 11px;           /* hard floor: nothing renders below this */
  --fs-eyebrow: 11px;
  --tracking-eyebrow: 0.28em;
  --tracking-nav: 0.16em;
  --tracking-button: 0.18em;

  /* ── Spacing (kept from the DS base; already half-adopted) ── */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 22px;
  --s-6: 28px; --s-7: 40px; --s-8: 56px; --s-9: 72px; --s-10: 96px;

  /* ── Radius ── */
  --r-1: 2px;      /* buttons, inputs: shop, not app */
  --r-2: 4px;      /* framed-plaque cards */
  --r-3: 10px;     /* media thumbs */
  --r-pill: 999px; /* chips only */

  /* ── Shadows (warm-tinted, never neutral grey) ── */
  --shadow-1: 0 6px 18px rgba(8, 47, 58, 0.08);
  --shadow-2: 0 12px 30px -16px rgba(8, 47, 58, 0.30);
  /* carved postcard frame: white mat + gilt pinstripe, composes into box-shadow lists */
  --pinline: inset 0 0 0 4px rgba(255,255,255,.9), inset 0 0 0 5px rgba(255,211,77,.55);

  /* v3 boardwalk craft (owner 08-16 22:30): cotton-candy pink, pastel bands,
     black linework frames. Deep teal survives as text/accent only. */
  --band-steel: #e8f0f4;        /* stats band: cool steel wash */
  --accent-marine: #0c5a6d;     /* deep marine text accent: 7.0:1 white, >=5.5 on bands */
  --line-black: #182226;        /* craft linework */
  --band-aqua: #eaf7f4;
  --band-sun: #fff8e6;
  --chrome-light: #f6fcfb;      /* nav + footer ground */
  /* self-made islamic star-and-cross (khatam) tiles */
  --pattern-seal: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2244%22 height=%2244%22 viewBox=%220 0 44 44%22%3E%3Ccircle cx=%2222%22 cy=%2222%22 r=%2220%22 fill=%22%23ffffff%22 stroke=%22%23182226%22 stroke-width=%222%22/%3E%3Cpath d=%22M22.00%2C9.00L25.81%2C12.81L31.19%2C12.81L31.19%2C18.19L35.00%2C22.00L31.19%2C25.81L31.19%2C31.19L25.81%2C31.19L22.00%2C35.00L18.19%2C31.19L12.81%2C31.19L12.81%2C25.81L9.00%2C22.00L12.81%2C18.19L12.81%2C12.81L18.19%2C12.81Z%22 fill=%22%23ffe9a8%22 stroke=%22%23182226%22 stroke-width=%221.8%22 stroke-linejoin=%22miter%22/%3E%3Ccircle cx=%2222%22 cy=%2222%22 r=%223.2%22 fill=%22%2335b5c9%22 stroke=%22%23182226%22 stroke-width=%221.2%22/%3E%3C/svg%3E");
  --pattern-strip: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2296%22 height=%2248%22 viewBox=%220 0 96 48%22%3E%3Cpath d=%22M24.00%2C7.00L28.98%2C11.98L36.02%2C11.98L36.02%2C19.02L41.00%2C24.00L36.02%2C28.98L36.02%2C36.02L28.98%2C36.02L24.00%2C41.00L19.02%2C36.02L11.98%2C36.02L11.98%2C28.98L7.00%2C24.00L11.98%2C19.02L11.98%2C11.98L19.02%2C11.98Z%22 fill=%22%23ffe9a8%22 stroke=%22%23182226%22 stroke-width=%222%22 stroke-linejoin=%22miter%22/%3E%3Ccircle cx=%2224%22 cy=%2224%22 r=%224%22 fill=%22%2335b5c9%22 stroke=%22%23182226%22 stroke-width=%221.4%22/%3E%3Cpath d=%22M24%2C-4.6L28.6%2C0L24%2C4.6L19.4%2C0Z%22 fill=%22%23cfe8df%22 stroke=%22%23182226%22 stroke-width=%221.4%22/%3E%3Cpath d=%22M24%2C43.4L28.6%2C48L24%2C52.6L19.4%2C48Z%22 fill=%22%23cfe8df%22 stroke=%22%23182226%22 stroke-width=%221.4%22/%3E%3Cpath d=%22M0%2C19.4L4.6%2C24L0%2C28.6L-4.6%2C24Z%22 fill=%22%23cfe8df%22 stroke=%22%23182226%22 stroke-width=%221.4%22/%3E%3Cpath d=%22M48%2C19.4L52.6%2C24L48%2C28.6L43.4%2C24Z%22 fill=%22%23cfe8df%22 stroke=%22%23182226%22 stroke-width=%221.4%22/%3E%3Cpath d=%22M72.00%2C7.00L76.98%2C11.98L84.02%2C11.98L84.02%2C19.02L89.00%2C24.00L84.02%2C28.98L84.02%2C36.02L76.98%2C36.02L72.00%2C41.00L67.02%2C36.02L59.98%2C36.02L59.98%2C28.98L55.00%2C24.00L59.98%2C19.02L59.98%2C11.98L67.02%2C11.98Z%22 fill=%22%23ffe9a8%22 stroke=%22%23182226%22 stroke-width=%222%22 stroke-linejoin=%22miter%22/%3E%3Ccircle cx=%2272%22 cy=%2224%22 r=%224%22 fill=%22%2335b5c9%22 stroke=%22%23182226%22 stroke-width=%221.4%22/%3E%3Cpath d=%22M72%2C-4.6L76.6%2C0L72%2C4.6L67.4%2C0Z%22 fill=%22%23cfe8df%22 stroke=%22%23182226%22 stroke-width=%221.4%22/%3E%3Cpath d=%22M72%2C43.4L76.6%2C48L72%2C52.6L67.4%2C48Z%22 fill=%22%23cfe8df%22 stroke=%22%23182226%22 stroke-width=%221.4%22/%3E%3Cpath d=%22M48%2C19.4L52.6%2C24L48%2C28.6L43.4%2C24Z%22 fill=%22%23cfe8df%22 stroke=%22%23182226%22 stroke-width=%221.4%22/%3E%3Cpath d=%22M96%2C19.4L100.6%2C24L96%2C28.6L91.4%2C24Z%22 fill=%22%23cfe8df%22 stroke=%22%23182226%22 stroke-width=%221.4%22/%3E%3C/svg%3E");

  /* ── Motion ── */
  --t-quick: 180ms ease;
  --t-image: 600ms ease;

  /* ── Legacy alias shims (DELETE when the last legacy-styled page dies).
       They let unmigrated inline styles keep resolving during the page-by-
       page migration; new CSS must never use them. ── */
  --parchment: var(--surface-page);
  --paper: var(--surface-card);
  --paper-2: var(--surface-card-alt);
  --cream: var(--surface-page);
  --cream-2: var(--surface-card);
  --ink: var(--text-strong);
  --ink-2: var(--text-body);
  --ink-soft: var(--text-body);
  --ink-3: var(--text-muted);
  --ink-muted: var(--text-muted);
  --gold: var(--accent);
  --brass: var(--accent);
  --brass-hi: #35b5c9;
  --brass-deep: var(--accent-ink);
  --teal-deep: var(--surface-dark);
  --teal-bright: #1d7f8f;
  --cobalt: var(--surface-dark);
  --cobalt-deep: var(--text-strong);
  --ottoman: var(--surface-dark);
  --ottoman-deep: var(--text-strong);
  --rule: var(--border-soft);
  --rule-strong: var(--border-strong);
  --surface-page-legacy: var(--surface-page);
  --serif: var(--font-serif);
  --display: var(--font-display);
  --sans: var(--font-ui);
}