/* ============================================================================
   Shared design tokens — Cookbook Codex
   ----------------------------------------------------------------------------
   The admin and the public gallery keep separate personalities on purpose: the
   admin is a dense working tool, the gallery is an editorial page. What they
   should NOT do is drift on the values that are meant to be the same. Before
   this file they carried near-identical literals that had already diverged
   (#faf7f4 vs #faf7f2 for the same paper), three unrelated focus colours, and
   six button radii between them.

   Anything genuinely shared lives here. Anything deliberately different stays
   in the page that owns it.
   ========================================================================== */

:root {
    /* ── Brand ──────────────────────────────────────────────────────────── */
    --codex-brown:        #5c3d2e;   /* headings, admin chrome, manifest theme */
    --codex-brown-dark:   #2c1810;
    --codex-brown-soft:   #8b6f5e;

    --codex-green:        #37c44c;   /* gallery accent, primary actions       */
    --codex-green-dark:   #2a8c3a;   /* the text-safe variant — 37c44c fails
                                        contrast on paper at body size        */

    /* ── Paper ──────────────────────────────────────────────────────────── */
    --codex-paper:        #faf7f2;
    --codex-paper-raised: #fff8ef;
    --codex-paper-sunk:   #f0e6d9;

    /* ── Rules and edges ────────────────────────────────────────────────── */
    --codex-rule:         #e8ddd3;
    --codex-rule-strong:  #d4c4b4;

    /* ── Semantic (separate from the accent, as they must be) ───────────── */
    --codex-danger:       #c0392b;
    --codex-warning:      #d4913b;
    --codex-success:      #27ae60;

    /* ── Shape ──────────────────────────────────────────────────────────── */
    --codex-radius-sm:    4px;   /* chips, badges          */
    --codex-radius:       8px;   /* buttons, inputs, cards */
    --codex-radius-lg:    12px;  /* panels, modals         */
    --codex-radius-pill:  22px;  /* gallery pills          */

    /* ── Focus ──────────────────────────────────────────────────────────── */
    /* One ring everywhere. Previously the admin, the gallery and the book
       page each used a different colour and offset. */
    --codex-focus:        var(--codex-green);
    --codex-focus-width:  3px;
    --codex-focus-offset: 2px;
}

/* A single focus treatment both surfaces can opt into. */
.codex-focusable:focus-visible {
    outline: var(--codex-focus-width) solid var(--codex-focus);
    outline-offset: var(--codex-focus-offset);
}