/* ---------------------------------------------------------------------------
   Coincide — design tokens
   ---------------------------------------------------------------------------
   THIS IS THE ONLY FILE IN THE PROJECT THAT MAY CONTAIN A RAW COLOUR VALUE.
   Every screen, component and stylesheet references these variables and never
   a literal hex/rgb/hsl. The palette is deliberately unsettled — it is meant to
   be judged on real screens and swapped here in one place, without touching
   any markup.
--------------------------------------------------------------------------- */

:root {
  /* --- Brand ----------------------------------------------------------- */
  --c-brand:            #7c5c3e;  /* warm bark — primary brand mark        */
  --c-brand-strong:     #5d442d;  /* pressed / hover                       */
  --c-accent:           #b4763a;  /* amber — highlights, focus, links      */

  /* --- Surfaces -------------------------------------------------------- */
  --c-surface:          #faf7f2;  /* page background                       */
  --c-surface-raised:   #ffffff;  /* cards, sheets                         */
  --c-surface-sunken:   #f0eae0;  /* wells, dividers' backdrop             */

  /* --- Ink ------------------------------------------------------------- */
  --c-ink:              #241d16;  /* primary text                          */
  --c-ink-muted:        #6b6055;  /* secondary text                        */
  --c-ink-faint:        #9a8f83;  /* tertiary / meta text                  */
  --c-ink-inverse:      #faf7f2;  /* text on brand surfaces                */

  /* --- Lines ----------------------------------------------------------- */
  --c-line:             #e2d9cc;
  --c-line-strong:      #c9bcaa;

  /* --- Status ---------------------------------------------------------- */
  --c-ok:               #3f6b46;
  --c-warn:             #9a6b1f;
  --c-danger:           #8f3a2f;

  /* --- Status backgrounds ---------------------------------------------- */
  /* Quiet tints behind a status message. Colour is NEVER the only signal —
     every one of these carries words as well — but a tint makes the shape of
     the page readable at arm's length in a busy room. */
  --c-ok-wash:          #edf3ed;
  --c-warn-wash:        #fbf1e0;
  --c-danger-wash:      #f8eae7;

  /* --- Focus ----------------------------------------------------------- */
  --c-focus:            var(--c-accent);

  /* --- Depth ----------------------------------------------------------- */
  --shadow-1: 0 1px 2px rgba(36, 29, 22, 0.06),
              0 2px 8px rgba(36, 29, 22, 0.05);
  --shadow-2: 0 2px 4px rgba(36, 29, 22, 0.08),
              0 12px 28px rgba(36, 29, 22, 0.10);

  /* --- Type ------------------------------------------------------------ */
  --font-display: ui-serif, Georgia, "Iowan Old Style", "Times New Roman", serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
               "Liberation Mono", monospace;

  --step--1: clamp(0.83rem, 0.79rem + 0.18vw, 0.94rem);
  --step-0:  clamp(1rem, 0.95rem + 0.25vw, 1.13rem);
  --step-1:  clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem);
  --step-2:  clamp(1.5rem, 1.3rem + 1vw, 2.1rem);
  --step-3:  clamp(2.1rem, 1.7rem + 2vw, 3.4rem);

  /* --- Space ----------------------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* --- Shape ----------------------------------------------------------- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 18px;
  --measure: 34rem;

  /* --- Touch ----------------------------------------------------------- */
  /* Nothing a guest has to press is smaller than this. Most of them are on a
     phone, standing up, at an event. */
  --hit: 44px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --c-brand:          #c9a074;
    --c-brand-strong:   #e0bd94;
    --c-accent:         #dda05c;

    --c-surface:        #16120e;
    --c-surface-raised: #211b15;
    --c-surface-sunken: #0f0c09;

    --c-ink:            #f2ece3;
    --c-ink-muted:      #b8ac9e;
    --c-ink-faint:      #8a7f72;
    --c-ink-inverse:    #16120e;

    --c-line:           #33291f;
    --c-line-strong:    #4a3c2e;

    --c-ok:             #7fb389;
    --c-warn:           #d8a458;
    --c-danger:         #d98878;

    --c-ok-wash:        #1a231b;
    --c-warn-wash:      #261d10;
    --c-danger-wash:    #2a1714;

    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.40),
                0 2px 8px rgba(0, 0, 0, 0.32);
    --shadow-2: 0 2px 4px rgba(0, 0, 0, 0.44),
                0 12px 28px rgba(0, 0, 0, 0.40);
  }
}