/* ============================================================
   ANDOMIR — design tokens
   Concept 5a "Altița · Matricea de romburi", palette 2c.
   Ported verbatim from the brand handoff. Every value here is
   final per the brand system; change these, not the call sites.
   ============================================================ */
:root {
  /* ── Brand core ─────────────────────────────────────────── */
  --an-ink:        #2A1518; /* page ground, dark theme */
  --an-ink-raised: #381D21; /* elevated surface / card on dark */
  --an-line:       #4A2C30; /* hairline borders on dark */
  --an-ochre:      #D9A227; /* primary accent, CTA, logo core */
  --an-ochre-700:  #B8871C; /* CTA hover / pressed */
  --an-clay:       #A8443C; /* secondary accent — GRAPHIC ONLY: nodes, tags,
                               chart strokes, fills behind wool text.
                               2.9:1 on ink — never use for text. */
  --an-clay-300:   #D98A80; /* clay for TEXT on ink — eyebrows, errors (5.4:1) */
  --an-wool:       #F2E8DA; /* text on dark, light-theme ground (14.2:1) */
  --an-wool-dim:   #B08A78; /* secondary text on dark (5.5:1) — min 15px */

  /* ── Light theme (documents, invoices, long-form only) ──── */
  --an-light-bg:      #F2E8DA;
  --an-light-surface: #FBF6EE;
  --an-light-line:    #DCCBB6;
  --an-light-text:    #2A1518;
  --an-light-dim:     #7A5A4C;

  /* ── Status (derived, same warmth) ──────────────────────── */
  --an-success: #4E7A52;
  --an-warning: #D9A227;
  --an-danger:  #D98A80; /* error text on ink; #A8443C only as a fill behind wool */

  /* ── Type ───────────────────────────────────────────────── */
  --an-font-display: 'Space Grotesk', Helvetica, Arial, sans-serif;
  --an-font-body:    'IBM Plex Sans', Helvetica, Arial, sans-serif;
  --an-font-mono:    'IBM Plex Mono', ui-monospace, monospace;

  --an-text-hero:  clamp(44px, 6vw, 84px);  /* 600, -2px tracking,   1.05 */
  --an-text-h1:    clamp(34px, 4vw, 52px);  /* 600, -1px,            1.1  */
  --an-text-h2:    28px;                    /* 600, -0.5px,          1.2  */
  --an-text-h3:    21px;                    /* 600,  0,              1.3  */
  --an-text-body:  17px;                    /* 400,  0,              1.6  */
  --an-text-small: 15px;                    /* 400,  0,              1.55 */
  --an-text-label: 12px;                    /* mono 500, 2px, uppercase   */

  /* ── Spacing — 4px base ─────────────────────────────────── */
  --an-space-1: 4px;  --an-space-2: 8px;  --an-space-3: 12px; --an-space-4: 16px;
  --an-space-5: 24px; --an-space-6: 32px; --an-space-7: 48px; --an-space-8: 64px;
  --an-space-9: 96px; --an-space-10: 128px;

  /* ── Geometry — the brand is ruler-drawn: corners stay sharp ── */
  --an-radius-0:    0px;   /* cards, sections, inputs, buttons */
  --an-radius-1:    2px;   /* max allowed softening */
  --an-radius-full: 999px; /* avatars and status dots ONLY */

  --an-border:        1px solid var(--an-line);
  --an-border-strong: 2px solid var(--an-ochre);
  --an-focus:         0 0 0 2px var(--an-ink), 0 0 0 4px var(--an-ochre);

  /* ── Elevation — flat brand, shadows are warm and shallow ── */
  --an-shadow-1: 0 1px 0 rgba(0,0,0,.35);
  --an-shadow-2: 0 8px 24px rgba(0,0,0,.35);

  /* ── Motion ─────────────────────────────────────────────── */
  --an-ease:      cubic-bezier(.2,.6,.2,1);
  --an-dur-fast:  120ms;
  --an-dur:       220ms;
  --an-dur-slow:  420ms;

  --an-container: 1200px;
}

/* Light theme: swaps only ground/text tokens. Ochre and clay stay identical.
   Opt in per-subtree with `data-an-theme="light"` — e.g. an invoice preview
   or a printable document embedded in an otherwise dark page. */
[data-an-theme='light'] {
  --an-ink:        var(--an-light-bg);
  --an-ink-raised: var(--an-light-surface);
  --an-line:       var(--an-light-line);
  --an-wool:       var(--an-light-text);
  --an-wool-dim:   var(--an-light-dim);
  --an-focus:      0 0 0 2px var(--an-light-bg), 0 0 0 4px var(--an-ochre);
}