/*
 * Shore: design tokens.
 * Two layers. The palette names a colour for what it looks like. The roles name
 * what a colour is for, and each role holds a day value and a dusk value.
 * Other stylesheets use roles and scales only. They never use a hex value.
 */

:root {
  color-scheme: light dark;

  /* ---------- Palette: day on the shore ---------- */
  --ink-teal: #1F3D4A;
  --slate: #4B6672;
  --teal: #2C6A80;
  --teal-deep: #20505F;
  --terracotta: #9A5545;
  --terracotta-deep: #7E4335;
  --shell-pink: #E2BAB1;
  --sand: #EED3CE;
  --blush: #F6E7E3;
  --sea: #579FB6;
  --sky: #B3E0F4;
  --sky-wash: #E3F3FA;
  --mist: #D5E7EF;
  --shallows: #F3FAFD;
  --foam: #FCFDFE;
  --white: #FFFFFF;
  --deep-water: #1E4554;
  --amber: #C98A00;
  --amber-wash: #FFF4D6;
  --amber-ink: #5C3E00;
  --brick: #B3261E;
  --moss: #2E7D4F;

  /* ---------- Palette: dusk on the same shore ---------- */
  --night-water: #0F2029;
  --night-shallows: #132A35;
  --night-surface: #17323E;
  --night-line: #2A4A58;
  --night-deep: #0A171D;
  --moon-foam: #E6F1F5;
  --haze: #A8C2CD;
  --sea-glow: #8ACBE0;
  --sea-glow-bright: #B0DDEC;
  --afterglow: #EBAA9A;
  --afterglow-bright: #F4C4B7;
  --dusk-rose: #6B4450;
  --dusk-plum: #3B2C33;
  --dusk-sand: #4A3639;
  --dusk-teal: #1D3F4D;
  --dusk-sky: #3F7C93;
  --lamp: #E5BE5C;
  --lamp-wash: #3A2E12;
  --lamp-ink: #F3DFA8;
  --ember: #F0998F;
  --fern: #7CC79B;

  /* ---------- Roles: every colour the interface uses ---------- */
  --color-page: light-dark(var(--foam), var(--night-water));
  --color-tint: light-dark(var(--shallows), var(--night-shallows));
  --color-surface: light-dark(var(--white), var(--night-surface));
  --color-line: light-dark(var(--mist), var(--night-line));
  --color-ink: light-dark(var(--ink-teal), var(--moon-foam));
  --color-ink-soft: light-dark(var(--slate), var(--haze));
  --color-action: light-dark(var(--teal), var(--sea-glow));
  --color-action-strong: light-dark(var(--teal-deep), var(--sea-glow-bright));
  --color-on-action: light-dark(var(--white), var(--night-water));
  --color-label: light-dark(var(--terracotta), var(--afterglow));
  --color-label-strong: light-dark(var(--terracotta-deep), var(--afterglow-bright));
  --color-on-label: light-dark(var(--white), var(--night-water));
  --color-warm: light-dark(var(--shell-pink), var(--dusk-rose));
  --color-warm-soft: light-dark(var(--blush), var(--dusk-plum));
  --color-warm-tile: light-dark(var(--sand), var(--dusk-sand));
  --color-cool: light-dark(var(--sea), var(--sea-glow));
  --color-cool-soft: light-dark(var(--sky-wash), var(--dusk-teal));
  --color-halo: light-dark(var(--sky), var(--dusk-sky));
  --color-focus: light-dark(var(--terracotta), var(--afterglow));
  --color-deep: light-dark(var(--deep-water), var(--night-deep));
  --color-on-deep: light-dark(#D9ECF4, #D5E6EC);
  --color-on-deep-soft: light-dark(#A9C8D5, #8FAAB5);
  --color-fee-surface: light-dark(var(--amber-wash), var(--lamp-wash));
  --color-fee-line: light-dark(var(--amber), var(--lamp));
  --color-fee-ink: light-dark(var(--amber-ink), var(--lamp-ink));
  --color-danger: light-dark(var(--brick), var(--ember));
  --color-ok: light-dark(var(--moss), var(--fern));

  /* The wash: sky to sand by day, deep water to afterglow at dusk */
  --wash-start: light-dark(var(--sky-wash), #14313E);
  --wash-mid: light-dark(#EEF7FB, #1F3644);
  --wash-end: light-dark(#F8ECE9, #43343F);
  --wash-glow-cool: light-dark(#C4E7F7, #23566B);
  --wash-glow-warm: light-dark(#F4D5CE, var(--dusk-rose));
  --wash-fill: linear-gradient(115deg, var(--wash-start), var(--wash-mid) 55%, var(--wash-end));

  /* The map */
  --map-sea: light-dark(var(--sky-wash), #10262F);
  --map-land: light-dark(#FBEFEA, #25404B);
  --map-coast: light-dark(var(--shell-pink), #3D5F6D);
  --map-grid: light-dark(#CFE6F0, #1B3742);
  --dot-group: light-dark(var(--teal), var(--sea-glow));
  --dot-temple: light-dark(var(--terracotta), var(--afterglow));
  --dot-retreat: light-dark(var(--amber), var(--lamp));
  --dot-kalyanamitta: light-dark(var(--ink-teal), var(--moon-foam));
  --dot-resource: light-dark(var(--slate), var(--haze));
  --dot-ring: light-dark(var(--white), var(--night-water));

  /* ---------- Type ---------- */
  --font-serif: Georgia, "Iowan Old Style", "Palatino Linotype", ui-serif, serif;
  --font-sans: "Avenir Next", Avenir, "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Seven sizes. Nothing sits between them. */
  --text-label: 0.8125rem;                                 /* 13px  eyebrows, tags, captions */
  --text-small: 0.9375rem;                                 /* 15px  buttons, nav, card meta */
  --text-body: 1.0625rem;                                  /* 17px  body */
  --text-lead: clamp(1.125rem, 0.95rem + 0.75vw, 1.3125rem); /* 18 to 21px */
  --text-title: 1.3125rem;                                 /* 21px  card and listing titles */
  --text-heading: clamp(1.75rem, 1.2rem + 2.4vw, 2.75rem); /* 28 to 44px  h2 */
  --text-display: clamp(2.25rem, 1.2rem + 5vw, 4.375rem);  /* 36 to 70px  h1 */

  --weight-regular: 400;
  --weight-strong: 600;
  --weight-bold: 700;

  --leading-display: 1.04;
  --leading-heading: 1.14;
  --leading-snug: 1.35;
  --leading-body: 1.62;

  --tracking-display: -0.03em;
  --tracking-heading: -0.015em;
  --tracking-label: 0.09em;

  --measure: 54ch;
  --measure-short: 34ch;

  /* ---------- Space: a 4px grid ---------- */
  --space-1: 0.25rem;  /*  4 */
  --space-2: 0.5rem;   /*  8 */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.5rem;   /* 24 */
  --space-6: 2rem;     /* 32 */
  --space-7: 3rem;     /* 48 */
  --space-8: 4rem;     /* 64 */
  --space-9: 6rem;     /* 96 */
  --space-section: clamp(3rem, 7vw, 5.75rem);
  --space-gutter: clamp(1rem, 5vw, 3rem);
  --shell-max: 72.5rem; /* 1160 */
  --shell-narrow: 47.5rem; /* 760 */

  /* ---------- Size ---------- */
  --size-control: 2.75rem;      /* 44  buttons and fields */
  --size-control-small: 2.25rem; /* 36  header and card buttons */
  --size-header: 4rem;
  --size-tile: 2.875rem;        /* 46  icon tile */
  --size-icon: 1.25rem;
  --size-dot: 5px;              /* map dot radius on screen */
  --size-leaf: 2.125rem;        /* the leaf in the brand mark */
  --size-check: 1.25rem;
  --size-tide: 2.75rem;         /* height of the tide line */
  --size-swatch: 3.25rem;
  --size-menu: 15rem;           /* menu panel, and the label column on the language page */
  --size-select-min: 9rem;
  --size-select-max: 16rem;

  /* ---------- Radius: four values ---------- */
  --radius-control: 8px;
  --radius-card: 14px;
  --radius-band: 18px;
  --radius-pill: 999px;

  /* ---------- Line and shadow ---------- */
  --line-width: 1px;
  --line-bar: 4px;
  --line-dot: 1.25px;
  --line-icon: 1.75px;
  --focus-width: 2px;
  --focus-offset: 3px;
  --blur-header: 14px;
  --line: var(--line-width) solid var(--color-line);
  --shadow-none: 0 0 0 transparent;
  --shadow-lift: 0 8px 24px light-dark(rgb(31 61 74 / 0.10), rgb(0 0 0 / 0.38));
  --shadow-float: 0 14px 40px light-dark(rgb(31 61 74 / 0.16), rgb(0 0 0 / 0.5));
  --ring-halo: 0 0 0 4px var(--color-halo);

  /* ---------- Motion ---------- */
  --dur-press: 110ms;   /* a press gives */
  --dur-quick: 200ms;   /* hover, colour, small moves */
  --dur-move: 360ms;    /* a thing slides to a new place */
  --dur-land: 620ms;    /* a thing arrives and settles */
  --dur-stagger: 70ms;  /* gap between things that arrive together */
  --dur-breath: 4s;     /* one in-breath or one out-breath */
  --dur-drift: 46s;     /* the wash crosses once */
  --dur-tide: 90s;      /* the tide line passes once */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-settle: cubic-bezier(0.22, 1.25, 0.36, 1); /* lands a little past, then rests */
  --ease-tide: cubic-bezier(0.45, 0, 0.55, 1);
  --land-rise: 26px;
  --press-scale: 0.97;
  --lift: -3px;

  /* ---------- Layers ---------- */
  --layer-header: 20;
  --layer-menu: 30;
  --layer-toast: 40;
}

/* The person can choose day or dusk. The choice wins over the device setting. */
[data-theme="light"] { color-scheme: light; }
[data-theme="dark"] { color-scheme: dark; }

/* Reduced motion: everything arrives at once and the wash holds still. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-press: 0.01ms;
    --dur-quick: 0.01ms;
    --dur-move: 0.01ms;
    --dur-land: 0.01ms;
    --dur-stagger: 0ms;
    --land-rise: 0px;
  }
}