/*
 * Tanière du Lac — the visual identity, defined once.
 *
 * Everything that is a *decision* lives here: colour, spacing, radius, type,
 * shadow, motion, and the two paw motifs. src/styles.css is layout and
 * components, and reaches for these tokens rather than restating a value.
 * The rule that keeps that true is asserted in test/theme.test.js: no literal
 * colour may appear in styles.css. If a screen needs a colour, it gets a
 * token here or it uses one that already exists.
 *
 * The name is the brief. *Tanière du Lac* is a lair by a lake, so the palette
 * is water, woods and cabin -- lake teal, cedar, cream, bark -- rather than
 * the mint-and-lilac a "cute dog app" defaults to. Warm, soft, and legible
 * on a phone screen in a car park.
 *
 * Contrast is not eyeballed. Every foreground/background pair below is
 * checked against WCAG AA in test/theme.test.js, in both colour schemes:
 * 4.5:1 for text, 3:1 for the borders of things you type into. Cute palettes
 * drift under 4.5:1 the moment somebody lightens a brown "just a bit", so it
 * is a test rather than a note.
 */

/* ==========================================================================
   1. Palette. Raw pigments, named for the thing they came from. These are
      not used directly by components -- the semantic layer below maps them
      to roles, so a role can be re-pointed without a find-and-replace.
   ========================================================================== */

:root {
  /* Surfaces: paper, sand, the shallows. */
  --c-cream: #fffcf6;
  --c-sand: #f7f2e8;
  --c-sand-deep: #efe7d7;

  /* Ink and the greys between it and the sand. */
  --c-bark: #241f19;
  --c-stone: #6b6355;
  --c-driftwood: #8e8271;
  --c-fog: #e4dbc9;

  /* The lake. The primary: buttons, the total, the focus ring. */
  --c-lake: #0f5a63;
  --c-lake-mist: #e2eff0;
  /* Legible-but-quieter cream, for the second line on a lake-filled card.
     A % opacity would have been the lazy way and lands under 4.5:1. */
  --c-lake-cream: #cfe2e4;

  /* Cedar. The warm accent -- paw motifs, and anything asking for a second
     look without being an error. */
  --c-cedar: #a04a24;
  --c-cedar-mist: #fdf1e3;

  /* Clay. Errors only; deliberately the only red in the box. */
  --c-clay: #a33232;
  --c-clay-mist: #fdecea;

  /* Night: the dark scheme's own pigments. Not a filter over the light ones
     -- an inverted teal goes muddy, so these are picked and checked apart. */
  --c-night: #14191a;
  --c-pine: #1d2426;
  --c-pine-deep: #171d1f;
  --c-moon: #f2ece1;
  --c-ash: #a49a8c;
  --c-drift-night: #7c7161;
  --c-fog-night: #2e3739;
  --c-lake-lt: #79c6cf;
  --c-lake-deep: #12333a;
  --c-lake-ink: #0d2124;
  --c-lake-ink-soft: #22474c;
  --c-cedar-lt: #eeae7a;
  --c-cedar-deep: #34261a;
  --c-clay-lt: #f0a09c;
  --c-clay-deep: #38201f;
}

/* ==========================================================================
   2. Roles. What a component actually asks for.
   ========================================================================== */

:root {
  --bg: var(--c-sand);
  --card: var(--c-cream);
  /* Inputs sit *below* the card they are on, not above it. */
  --field: var(--c-sand);
  --ink: var(--c-bark);
  --muted: var(--c-stone);

  /* Two weights of line: --line draws the soft edge of a card, which the
     shadow already half-states; --line-strong outlines a control, and has to
     clear 3:1 on its own because nothing else says where the box is. */
  --line: var(--c-fog);
  --line-strong: var(--c-driftwood);

  --accent: var(--c-lake);
  --accent-ink: var(--c-cream);
  --accent-ink-soft: var(--c-lake-cream);
  --accent-soft: var(--c-lake-mist);
  --accent-soft-ink: var(--c-lake);

  --cedar: var(--c-cedar);
  --cedar-soft: var(--c-cedar-mist);

  --warn: var(--c-cedar);
  --warn-bg: var(--c-cedar-mist);
  --err: var(--c-clay);
  --err-bg: var(--c-clay-mist);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: var(--c-night);
    --card: var(--c-pine);
    --field: var(--c-pine-deep);
    --ink: var(--c-moon);
    --muted: var(--c-ash);

    --line: var(--c-fog-night);
    --line-strong: var(--c-drift-night);

    --accent: var(--c-lake-lt);
    --accent-ink: var(--c-lake-ink);
    --accent-ink-soft: var(--c-lake-ink-soft);
    --accent-soft: var(--c-lake-deep);
    --accent-soft-ink: var(--c-lake-lt);

    --cedar: var(--c-cedar-lt);
    --cedar-soft: var(--c-cedar-deep);

    --warn: var(--c-cedar-lt);
    --warn-bg: var(--c-cedar-deep);
    --err: var(--c-clay-lt);
    --err-bg: var(--c-clay-deep);
  }
}

/* ==========================================================================
   3. Space. One scale, so two screens built a month apart still line up.
      Roughly 1.5x steps; --space-4 is the resting gap between things.
   ========================================================================== */

:root {
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;

  /* The gap between cards and between fields. Named separately because
     layout reads better asking for "the gap" than for "space-4". */
  --gap: var(--space-4);

  /* Smallest comfortable touch target: 44px. Do not go below this -- this
     gets used one-handed, standing up, holding a dog lead. */
  --tap: 2.75rem;

  /* Reading measure for the page. Widened at the desktop breakpoint. */
  --page: 44rem;
}

/* ==========================================================================
   4. Radius. Cute is mostly this: nothing in the app has a sharp corner.
      The scale is deliberately generous -- a 4px radius reads as "software",
      an 18px one reads as a pebble.
   ========================================================================== */

:root {
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius: 18px;
  --radius-lg: 24px;
  --radius-pill: 999px;
}

/* ==========================================================================
   5. Type. No webfont: the app has to open off a file:// path with no
      network, so a downloaded face is not on offer. `ui-rounded` gets the
      genuinely friendly face on Apple platforms; the two named families
      after it are a free win for anyone who happens to have them installed;
      everything else lands on a clean system sans, which is friendly enough
      at the weights used below.
   ========================================================================== */

:root {
  --font: ui-rounded, 'SF Pro Rounded', Nunito, Quicksand, -apple-system,
    BlinkMacSystemFont, 'Segoe UI Variable Text', 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;

  --text-xs: .75rem;
  --text-sm: .8125rem;
  --text-md: .9rem;
  /* Exactly 1rem, and not a hair under: iOS Safari zooms the whole page when
     you focus an input whose text is smaller than 16px. */
  --text-base: 1rem;
  --text-lg: 1.1rem;
  --text-xl: 1.3rem;

  /* The two big ones, both fluid so a 360px phone is not shouted at. */
  --text-title: clamp(1.45rem, 1.15rem + 1.3vw, 2.05rem);
  --text-total: clamp(2.6rem, 2rem + 4.2vw, 3.6rem);

  --leading: 1.55;
  --leading-tight: 1.15;

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Card headings are small caps-ish labels; they need the air. */
  --tracking-label: .09em;
  --tracking-title: -.015em;
}

/* ==========================================================================
   6. Shadow. Warm and low-contrast: the light in here comes through a window,
      not from a spotlight. Tinted with the ink colour rather than black,
      which is what stops a cream page looking grimy.
   ========================================================================== */

:root {
  --shadow-sm: 0 1px 2px rgba(36, 31, 25, .05);
  --shadow: 0 1px 2px rgba(36, 31, 25, .05), 0 10px 26px -14px rgba(36, 31, 25, .22);
  --shadow-lift: 0 2px 4px rgba(36, 31, 25, .06), 0 18px 34px -16px rgba(36, 31, 25, .3);
}

@media (prefers-color-scheme: dark) {
  :root {
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 26px -14px rgba(0, 0, 0, .6);
    --shadow-lift: 0 2px 4px rgba(0, 0, 0, .35), 0 18px 34px -16px rgba(0, 0, 0, .7);
  }
}

/* ==========================================================================
   7. Motion. Short, soft, and entirely optional -- see section 9.
   ========================================================================== */

:root {
  --dur-fast: 110ms;
  --dur: 200ms;
  --ease: cubic-bezier(.2, .75, .3, 1);
  /* The only springy one. Used once, on the total. */
  --ease-bounce: cubic-bezier(.2, 1.4, .4, 1);
}

/* ==========================================================================
   8. Motifs. Paws, as punctuation.
   ========================================================================== */

:root {
  /* The select caret. Lives here so styles.css stays colour-free and the
     dark variant is one override rather than a second @media block. */
  --icon-caret: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%236b6355' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' d='M1 1.75 6 6.5l5-4.75'/%3E%3C/svg%3E");

  /* A cedar paw, used as a list marker. */
  --icon-paw: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23a04a24'%3E%3Cellipse cx='6.4' cy='9.6' rx='2.5' ry='3'/%3E%3Cellipse cx='10.6' cy='6.3' rx='2.6' ry='3.2'/%3E%3Cellipse cx='15.1' cy='6.6' rx='2.5' ry='3.1'/%3E%3Cellipse cx='18.6' cy='10.4' rx='2.3' ry='2.8'/%3E%3Cpath d='M12.2 11.4c3.3 0 5.9 2.6 5.9 5.2 0 2.1-1.7 3.4-3.5 3.4-1.1 0-1.7-.5-2.4-.5s-1.3.5-2.4.5c-1.8 0-3.5-1.3-3.5-3.4 0-2.6 2.6-5.2 5.9-5.2Z'/%3E%3C/svg%3E");

  /* The same paw at 16% alpha, for the one watermark in the app: the corner
     of the total card. One paw, once. Anything more and it is wallpaper. */
  --icon-paw-quiet: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgba(255,252,246,.16)'%3E%3Cellipse cx='6.4' cy='9.6' rx='2.5' ry='3'/%3E%3Cellipse cx='10.6' cy='6.3' rx='2.6' ry='3.2'/%3E%3Cellipse cx='15.1' cy='6.6' rx='2.5' ry='3.1'/%3E%3Cellipse cx='18.6' cy='10.4' rx='2.3' ry='2.8'/%3E%3Cpath d='M12.2 11.4c3.3 0 5.9 2.6 5.9 5.2 0 2.1-1.7 3.4-3.5 3.4-1.1 0-1.7-.5-2.4-.5s-1.3.5-2.4.5c-1.8 0-3.5-1.3-3.5-3.4 0-2.6 2.6-5.2 5.9-5.2Z'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
  :root {
    --icon-caret: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23a49a8c' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' d='M1 1.75 6 6.5l5-4.75'/%3E%3C/svg%3E");
    --icon-paw: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23eeae7a'%3E%3Cellipse cx='6.4' cy='9.6' rx='2.5' ry='3'/%3E%3Cellipse cx='10.6' cy='6.3' rx='2.6' ry='3.2'/%3E%3Cellipse cx='15.1' cy='6.6' rx='2.5' ry='3.1'/%3E%3Cellipse cx='18.6' cy='10.4' rx='2.3' ry='2.8'/%3E%3Cpath d='M12.2 11.4c3.3 0 5.9 2.6 5.9 5.2 0 2.1-1.7 3.4-3.5 3.4-1.1 0-1.7-.5-2.4-.5s-1.3.5-2.4.5c-1.8 0-3.5-1.3-3.5-3.4 0-2.6 2.6-5.2 5.9-5.2Z'/%3E%3C/svg%3E");
    --icon-paw-quiet: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgba(13,33,36,.16)'%3E%3Cellipse cx='6.4' cy='9.6' rx='2.5' ry='3'/%3E%3Cellipse cx='10.6' cy='6.3' rx='2.6' ry='3.2'/%3E%3Cellipse cx='15.1' cy='6.6' rx='2.5' ry='3.1'/%3E%3Cellipse cx='18.6' cy='10.4' rx='2.3' ry='2.8'/%3E%3Cpath d='M12.2 11.4c3.3 0 5.9 2.6 5.9 5.2 0 2.1-1.7 3.4-3.5 3.4-1.1 0-1.7-.5-2.4-.5s-1.3.5-2.4.5c-1.8 0-3.5-1.3-3.5-3.4 0-2.6 2.6-5.2 5.9-5.2Z'/%3E%3C/svg%3E");
  }
}

/* The paw beside the app title, and anywhere else a mark is wanted. Inline
   SVG rather than a background, so it takes currentColor and scales with the
   text it sits next to. */
.paw-mark {
  width: 1em;
  height: 1em;
  flex: none;
  color: var(--cedar);
  /* Optically centred against a cap-height letter, which the box is not. */
  transform: translateY(.06em);
}

/* A list whose markers are paws instead of bullets. */
.paw-list { list-style: none; }

.paw-list > li {
  position: relative;
  padding-left: var(--space-5);
}

.paw-list > li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .38em;
  width: .8rem;
  height: .8rem;
  background: var(--icon-paw) center / contain no-repeat;
  /* Each paw is turned a little differently, so a column of them reads as
     tracks crossing the page rather than as a stamped repeat. */
  transform: rotate(-14deg);
}

.paw-list > li:nth-child(even)::before { transform: rotate(11deg); }

/* ==========================================================================
   9. Reduced motion. The tokens go to zero as well as the blanket override
      in styles.css, so anything reading --dur to build its own transition
      gets the message too, and the one springy easing stops being springy.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur: 0ms;
    --ease: linear;
    --ease-bounce: linear;
  }
}