/* Studio 95 — Color
   Two brand colours drawn from the logo: espresso brown #541e12 and warm taupe/sand #c6baa2.
   The world is warm: cream paper, espresso ink, taupe rules. Semantics stay muted and
   warm-tuned (brick, amber, olive, slate) so nothing breaks the editorial calm. */
:root{
  /* ---- Espresso (primary brown) ---- */
  --espresso-50:#f7efe9;
  --espresso-100:#ecd9cd;
  --espresso-200:#d9b39c;
  --espresso-300:#c08d70;
  --espresso-400:#9c5c3f;
  --espresso-500:#7a3c25;
  --espresso-600:#63291a;
  --espresso-700:#541e12;   /* brand brown */
  --espresso-800:#43150b;
  --espresso-900:#300d06;

  /* ---- Sand (secondary taupe) ---- */
  --sand-50:#faf7f0;
  --sand-100:#f1ebdd;
  --sand-200:#e6dcc7;
  --sand-300:#d6c8ac;
  --sand-400:#c6baa2;       /* brand taupe */
  --sand-500:#b0a184;
  --sand-600:#92846a;
  --sand-700:#6f6450;
  --sand-800:#4c4436;
  --sand-900:#2e281f;

  /* ---- Warm neutral (stone) — text & greys ---- */
  --stone-50:#f8f5f1;
  --stone-100:#efe9e1;
  --stone-200:#e1d9cd;
  --stone-300:#c9bdac;
  --stone-400:#a89a89;
  --stone-500:#837565;
  --stone-600:#63574a;
  --stone-700:#473d33;
  --stone-800:#2e271f;
  --stone-900:#1c1712;

  /* ---- Warm foundations ---- */
  --cream:#f5f0e8;          /* page background — warm paper */
  --paper:#faf7f2;          /* card / surface — warm white */
  --ink:#2b1710;            /* body text — warm near-black */
  --white:#ffffff;
  --black:#140b06;

  /* ---- Muted semantic hues ---- */
  --olive-50:#eef0e4;  --olive-500:#6f7350;  --olive-700:#4d5137;   /* success */
  --amber-50:#f8ecd9;  --amber-500:#b5762a;  --amber-700:#8a5717;   /* warning */
  --brick-50:#f7e2db;  --brick-500:#a83a26;  --brick-700:#7f2818;   /* danger  */
  --slate-50:#e7edee;  --slate-500:#5c6b72;  --slate-700:#3f4b50;   /* info    */

  /* ================= SEMANTIC ALIASES ================= */
  /* Surfaces */
  --color-bg:var(--cream);
  --color-surface:var(--paper);
  --color-surface-sunken:var(--sand-100);
  --color-surface-raised:var(--white);
  --color-inverse:var(--espresso-700);
  --color-inverse-deep:var(--espresso-900);

  /* Text */
  --color-text:var(--ink);
  --color-text-muted:var(--stone-600);
  --color-text-subtle:var(--stone-500);
  --color-text-inverse:var(--sand-50);
  --color-text-on-brand:var(--sand-100);
  --color-heading:var(--espresso-900);

  /* Brand / interactive */
  --color-brand:var(--espresso-700);
  --color-brand-strong:var(--espresso-800);
  --color-brand-soft:var(--espresso-500);
  --color-secondary:var(--sand-400);
  --color-secondary-strong:var(--sand-600);
  --color-accent:var(--espresso-700);

  /* Lines */
  --color-border:var(--sand-200);
  --color-border-strong:var(--sand-300);
  --color-hairline:color-mix(in oklab, var(--espresso-900) 12%, transparent);
  --color-divider:color-mix(in oklab, var(--espresso-900) 8%, transparent);

  /* Focus */
  --color-focus:var(--espresso-500);
  --focus-ring:0 0 0 3px color-mix(in oklab, var(--espresso-500) 32%, transparent);

  /* State fills */
  --color-success:var(--olive-500); --color-success-bg:var(--olive-50); --color-success-text:var(--olive-700);
  --color-warning:var(--amber-500); --color-warning-bg:var(--amber-50); --color-warning-text:var(--amber-700);
  --color-danger:var(--brick-500);  --color-danger-bg:var(--brick-50);  --color-danger-text:var(--brick-700);
  --color-info:var(--slate-500);    --color-info-bg:var(--slate-50);    --color-info-text:var(--slate-700);

  /* Links */
  --color-link:var(--espresso-700);
  --color-link-hover:var(--espresso-500);

  /* Overlays / scrims */
  --scrim:color-mix(in oklab, var(--espresso-900) 58%, transparent);
  --scrim-soft:color-mix(in oklab, var(--espresso-900) 32%, transparent);
}