/* ============================================================
   Lorabel design tokens. Everything the site looks like starts here.
   Change a colour below and the whole site follows: buttons, sky,
   placeholders, the lot. No other file types a colour by hand,
   and the build fails if one does.
   ============================================================ */

:root {
  /* ---- the four brand colours (may change to match the real silk) ---- */
  --rose:    #E7A9A4;
  --vanilla: #F3DDB0;
  --cocoa:   #5B3A2E;   /* used everywhere black would normally go */
  --cream:   #FBF3E4;

  /* ---- in-between shades, all mixed by the browser from the four above ---- */
  --dusk:           color-mix(in oklab, var(--cocoa) 58%, var(--rose));      /* the sky just before dawn */
  --horizon:        color-mix(in oklab, var(--cocoa) 78%, var(--rose));      /* the glow at the bottom of the night */
  --rose-tint:      color-mix(in oklab, var(--rose) 30%, var(--cream));      /* soft panels on cream */
  --rose-deep:      color-mix(in oklab, var(--rose) 70%, var(--cocoa));      /* error outline */
  --sun-core:       var(--cream);                                             /* centre of the sun */
  --sun-edge:       color-mix(in oklab, var(--vanilla) 55%, var(--rose));    /* rim of the sun */
  --sun-glow:       color-mix(in oklab, var(--vanilla) 48%, transparent);
  --btn-hover:      color-mix(in oklab, var(--vanilla) 85%, var(--cream));
  --btn-day-hover:  color-mix(in oklab, var(--cocoa) 86%, var(--rose));
  --line-day:       color-mix(in oklab, var(--cocoa) 24%, transparent);      /* decorative lines */
  --line-input:     color-mix(in oklab, var(--cocoa) 60%, transparent);      /* form control borders */
  --sheen:          color-mix(in oklab, var(--cream) 22%, transparent);      /* silk highlight on placeholders */
  --sheen-soft:     color-mix(in oklab, var(--cream) 12%, transparent);
  --sheen-night:    color-mix(in oklab, var(--cream) 10%, transparent);
  --ph-highlight:   color-mix(in oklab, var(--cream) 55%, var(--rose));
  --ph-night-glow:  color-mix(in oklab, var(--rose) 45%, var(--cocoa));
  --ph-night-warm:  color-mix(in oklab, var(--vanilla) 35%, var(--cocoa));
  --label-bg:       color-mix(in oklab, var(--cocoa) 74%, transparent);
  --focus-glow:     color-mix(in oklab, var(--rose) 55%, transparent);
  --error-bg:       color-mix(in oklab, var(--rose) 45%, var(--cream));
  --shadow:         color-mix(in oklab, var(--cocoa) 28%, transparent);

  /* ---- type ---- */
  --font-display: 'Sentient', Georgia, 'Times New Roman', serif;
  --font-text:    'Author', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --text: 17px;
  --h1:   clamp(38px, 4.2vw + 10px, 64px);
  --h2:   clamp(32px, 3.2vw + 20px, 54px);

  /* ---- shape and space ---- */
  --r-pill:  999px;
  --r-panel: 28px;
  --r-card:  24px;
  --r-input: 14px;
  --gutter:  20px;
  --max:     1120px;
  --section: clamp(72px, 10vw, 128px);

  /* ---- motion ---- */
  --ease-out: cubic-bezier(.2, .7, .2, 1);

  /* ---- the dawn: 0 is night, 1 is morning. Set by scroll, read by the sky. ---- */
  --dawn: 0;
}

/* Older phone browsers (before 2023) cannot mix colours. They get the nearest
   plain brand colour instead, so nothing disappears. */
@supports not (color: color-mix(in oklab, red, blue)) {
  :root {
    --dusk: var(--cocoa);
    --horizon: var(--cocoa);
    --rose-tint: var(--vanilla);
    --rose-deep: var(--rose);
    --sun-core: var(--cream);
    --sun-edge: var(--vanilla);
    --sun-glow: transparent;
    --btn-hover: var(--vanilla);
    --btn-day-hover: var(--cocoa);
    --line-day: var(--cocoa);
    --line-input: var(--cocoa);
    --sheen: transparent;
    --sheen-soft: transparent;
    --sheen-night: transparent;
    --ph-highlight: var(--rose);
    --ph-night-glow: var(--cocoa);
    --ph-night-warm: var(--cocoa);
    --label-bg: var(--cocoa);
    --focus-glow: var(--rose);
    --error-bg: var(--rose);
    --shadow: transparent;
  }
}

@media (max-width: 340px) {
  :root { --h1: 34px; }
}

@media (min-width: 720px) {
  :root {
    --text: 18px;
    --gutter: 32px;
  }
}

/* ---- self-hosted fonts (Fontshare, ITF Free Font License, see assets/fonts/LICENSE.txt) ---- */
@font-face { font-family: 'Sentient'; src: url('/assets/fonts/Sentient-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Sentient'; src: url('/assets/fonts/Sentient-Italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Sentient'; src: url('/assets/fonts/Sentient-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Sentient'; src: url('/assets/fonts/Sentient-MediumItalic.woff2') format('woff2'); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: 'Author'; src: url('/assets/fonts/Author-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Author'; src: url('/assets/fonts/Author-Italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Author'; src: url('/assets/fonts/Author-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Author'; src: url('/assets/fonts/Author-Semibold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }