/* ────────────────────────────────────────────────────────────
   Lucian — Design Tokens (W3C-compatible CSS layer)
   Source of truth: logo (#e8e8e0 / #525244 / #8c8c7a)
   Light mode only. Dark mode reserved for a later iteration.
   ──────────────────────────────────────────────────────────── */

:root {
  /* — primitive palette — */
  --olive-900: #2a2a22;
  --olive-800: #3a3a30;
  --olive-700: #525244;   /* logo primary */
  --olive-500: #6f6f5e;
  --olive-400: #8c8c7a;   /* logo secondary */
  --olive-300: #b3b3a3;
  --olive-200: #d8d6c8;
  --olive-100: #e8e8e0;   /* logo bg */
  --olive-50:  #f5f4ee;
  --olive-25:  #fbfaf6;

  --paper:     #ffffff;

  --siena-600: #7a3a1c;
  --moss-600:  #4a6b3a;
  --moss-100:  #e1ecdf;
  --amber-600: #8c5a1c;
  --amber-100: #f5e8d4;
  --rust-600:  #8c2828;
  --rust-100:  #f3dada;

  /* — semantic tokens (use these in components) — */
  --color-bg:           var(--olive-50);
  --color-surface:      var(--olive-100);
  --color-paper:        var(--paper);
  --color-rule:         var(--olive-200);
  --color-rule-strong:  var(--olive-300);

  --color-ink:          var(--olive-900);
  --color-ink-muted:    var(--olive-500);
  --color-ink-subtle:   var(--olive-400);
  --color-ink-onfill:   var(--paper);

  --color-primary:      var(--olive-700);
  --color-primary-hover:var(--olive-800);
  --color-primary-soft: var(--olive-100);
  --color-accent:       var(--siena-600);

  --color-success:      var(--moss-600);
  --color-success-soft: var(--moss-100);
  --color-warn:         var(--amber-600);
  --color-warn-soft:    var(--amber-100);
  --color-danger:       var(--rust-600);
  --color-danger-soft:  var(--rust-100);

  --color-focus-ring:   color-mix(in srgb, var(--olive-700) 50%, transparent);

  /* — role accents (member-panel only) —
     Not part of the olive-paper palette. Kept for member-role
     disambiguation. Contrast measured against --color-bg
     (#f5f4ee) and --color-surface (#e8e8e0); both ≥ 4.5:1.
     Source of truth: test/integration/role_tokens_contrast_test.rb */
  --color-role-notary: #1d4ed8; /* 6.08:1 on bg, 5.44:1 on surface */
  --color-role-agent:  #115e59; /* 6.88:1 on bg, 6.16:1 on surface */
  --color-role-buyer:  #9a3412; /* 6.63:1 on bg, 5.93:1 on surface */
  --color-role-seller: #7c3aed; /* 5.17:1 on bg, 4.63:1 on surface */

  /* — type — */
  --font-serif: "Fraunces", Georgia, "Times New Roman", serif;
  --font-sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:  "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --fs-12: 0.75rem;   /* 12 — caption / mono labels */
  --fs-13: 0.8125rem; /* 13 — small */
  --fs-14: 0.875rem;  /* 14 — secondary body */
  --fs-15: 0.9375rem; /* 15 — body */
  --fs-16: 1rem;      /* 16 — body large */
  --fs-18: 1.125rem;  /* 18 — h6 */
  --fs-20: 1.25rem;   /* 20 — h5 */
  --fs-24: 1.5rem;    /* 24 — h4 */
  --fs-30: 1.875rem;  /* 30 — h3 */
  --fs-38: 2.375rem;  /* 38 — h2 */
  --fs-48: 3rem;      /* 48 — h1 */
  --fs-64: 4rem;      /* 64 — display */

  --lh-tight:  1.15;
  --lh-snug:   1.3;
  --lh-normal: 1.5;
  --lh-relaxed:1.65;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.06em;
  --tracking-mono:   0.1em;

  /* — control heights —
     Form-control sizing (.lc-btn, .lc-input). Decorations like avatars
     and logos use raw px and are not on this scale. Pinned by
     test/integration/components_extraction_test.rb. */
  --control-h-sm: 2rem;    /* 32px */
  --control-h:    2.5rem;  /* 40px — default */
  --control-h-lg: 3rem;    /* 48px */

  /* — spacing (4-step) — */
  --sp-0:  0;
  --sp-1:  0.25rem;  /* 4  */
  --sp-2:  0.5rem;   /* 8  */
  --sp-3:  0.75rem;  /* 12 */
  --sp-4:  1rem;     /* 16 */
  --sp-5:  1.5rem;   /* 24 */
  --sp-6:  2rem;     /* 32 */
  --sp-7:  3rem;     /* 48 */
  --sp-8:  4rem;     /* 64 */
  --sp-9:  6rem;     /* 96 */

  /* — radius — */
  --r-0: 0;
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 6px;
  --r-4: 10px;
  --r-pill: 999px;

  /* — shadow — */
  --shadow-1: 0 1px 0 rgba(42, 42, 34, 0.04), 0 1px 2px rgba(42, 42, 34, 0.04);
  --shadow-2: 0 1px 2px rgba(42, 42, 34, 0.06), 0 4px 12px rgba(42, 42, 34, 0.06);
  --shadow-3: 0 2px 4px rgba(42, 42, 34, 0.08), 0 12px 32px rgba(42, 42, 34, 0.08);

  /* — motion — */
  --ease-out: cubic-bezier(0.2, 0.8, 0.3, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;

  /* — layout — */
  --container-max: 1200px;
  --container-narrow: 720px;
}