/* Design tokens. Every colour, font and shape value used by the site lives here,
   named by role. No other file may hard-code a colour or font. Source: docs/ux-spec.md (Visual system). */

@font-face {
  font-family: "Lora";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/lora-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Lora";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/lora-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Lora";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/lora-latin-400-italic.woff2") format("woff2");
}

:root {
  /* Base palette, by role */
  --color-bg: #f6fff8;            /* Mint Cream */
  --color-wave-1: #eaf4f4;        /* Azure Mist */
  --color-wave-2: #cce3de;        /* Frozen Water */
  --color-wave-3: #a4c3b2;        /* Muted Teal */
  --color-card: #cce3de;          /* Frozen Water, default card */
  --color-card-deep: #a4c3b2;     /* Muted Teal, deeper card */
  --color-card-lake: #bfd6e3;     /* Lake mist, optional card */
  --color-card-sage: #b9d1b0;     /* Sage, optional card */
  --color-primary: #2c4a3e;       /* Deep Spruce: buttons, text on cards */
  --color-on-primary: #f6fff8;    /* Mint Cream on Deep Spruce */
  --color-text: #2c4a3e;
  --color-text-secondary: #3d6673; /* Lake: links, secondary text */
  --color-text-placeholder: #425f54;
  --color-accent: #e5736a;        /* Coral */
  --color-accent-deep: #a8362e;   /* Deep Coral */
  --color-cta: #a8362e;           /* main button on the website: Deep Coral */
  --color-on-cta: #f6fff8;
  --color-card-coral: #f6d3ce;    /* pale coral wash, website sample cards */
  --color-wave-coral: #e5736a;    /* coral wave, drawn very faint */
  --color-error: #a8362e;         /* Deep Coral: errors */
  --color-void: rgb(44 74 62 / 10%);       /* text box on a light card */
  --color-void-shadow: rgb(44 74 62 / 22%);
  --color-card-shadow: rgb(44 74 62 / 24%);
  --color-card-shadow-soft: rgb(44 74 62 / 12%);
  --color-veil: rgb(246 255 248 / 96%);       /* pale veil that keeps text readable over the cards */
  --color-veil-clear: rgb(246 255 248 / 0%);
  --color-footer-dark: rgb(44 74 62 / 96%);   /* dark footer gradient: Deep Spruce at 96%... */
  --color-footer-clear: rgb(44 74 62 / 0%);   /* ...fading to clear */

  /* Fonts */
  --font-serif: "Lora", Georgia, "Noto Serif", serif;
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Type sizes */
  --size-wordmark: 31px;
  --size-headline: 22px;
  --size-tagline: 17px;
  --size-body: 17px;
  --size-thought: 20px;
  --size-card-thought: 17px;
  --size-small: 13.5px;

  /* Shape and depth */
  --radius-card: 28px;
  --radius-void: 20px;
  --button-height: 54px;
  --tap-min: 44px;
  --space-stack: clamp(10px, 2dvh, 16px);   /* vertical gap between the text box, button and link */
  --logo-ratio: 0.9134;                      /* logo width divided by height */
  --shadow-card: 0 12px 32px var(--color-card-shadow), 0 2px 8px var(--color-card-shadow-soft);
  --shadow-void: inset 0 2px 6px var(--color-void-shadow);

  /* Motion */
  --motion-fast: 320ms;
  --motion-wave: 38s;
}