/*
 * Dayreef theme
 * --------------------------------------------
 * Source of truth for colour, type, space, radius and shadow tokens.
 * Framework-free: @font-face rules and CSS custom properties only.
 * This file does not style elements — site.css and the demo consume var().
 *
 * RULE (CTO): every colour and font on the site lives here. Other files
 * use var(--fh-*) only. Existing --fh-* NAMES are kept.
 *
 * Load:  <link rel="stylesheet" href="/assets/theme.css">
 *
 * Palette source
 *   Danny's baseline wall (warm off-white paper, sage accents, peach
 *   highlight for the next event, evening header for Tomorrow).
 *   Supporting text colours that missed WCAG AA at their original
 *   baseline values have been darkened slightly in the same hue so
 *   normal text reaches 4.5:1. Original values are noted in comments.
 *
 * Colour modes
 *   Light (default): the wall and landing page, warm paper.
 *   Evening: not a full inversion — Tomorrow-prep uses --fh-evening-*
 *   on the date header only, on top of the light wall.
 *   Night (data-theme="night" or prefers-color-scheme: dark): a dark
 *   companion for landing pages and a scheduled night wall, derived
 *   from the evening header teal.
 *
 *     <html data-theme="night">   or   data-theme="day"
 *
 * Fonts (self-hosted, SIL OFL 1.1 — see assets/fonts/FONTS.md)
 *   --fh-font-sans     Heebo     UI, body, event titles, wordmark
 *   --fh-font-display  Heebo     headings (same family as the wall)
 *
 * Wall type keeps Danny's hierarchy, scaled for 1–2 m viewing: titles,
 * times and the 'next' event are 24px or larger (default title 40px,
 * dense title 32px, time 28px); the clock is 88px; secondary labels
 * are 24px in the assembled demo and must never go below 18px.
 * Landing/SEO pages use --fh-text-xs…6xl, not the wall scale.
 * See brand/DESIGN-EN.md and brand/BRAND.md.
 */

/* -------------------------------------------------------------------------- */
/* Fonts                                                                      */

@font-face {
  font-family: "Heebo";
  src: url("./fonts/heebo.woff2") format("woff2"),
       url("./fonts/heebo.woff") format("woff"),
       url("./fonts/heebo.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* -------------------------------------------------------------------------- */
/* Light (default)                                                            */

:root,
[data-theme="day"] {
  color-scheme: light;

  --fh-color-bg: #FAF8F3;             /* paper */
  --fh-color-bg-alt: #F3F2EB;
  --fh-color-surface: #FFFDF9;        /* toggle active, cards */
  --fh-color-text: #29372F;           /* ink — 11.76:1 AAA on paper */
  --fh-color-text-muted: #667064;     /* secondary — 4.87:1 AA on paper */
  --fh-color-border: #E5E6DD;         /* line */
  --fh-color-border-strong: #DCE4D5;
  --fh-color-primary: #587765;        /* sage — 4.66:1 AA as text on paper */
  --fh-color-primary-text: #FAF8F3;   /* 4.66:1 AA on sage */
  --fh-color-primary-hover: #4A6656;
  --fh-color-primary-on-bg: #4A6656;  /* slightly darker sage if used as text at AAA-ish */
  --fh-color-accent: #587765;
  --fh-color-accent-text: #FAF8F3;
  --fh-color-accent-on-bg: #4A6656;
  --fh-color-focus: #587765;
  --fh-color-success: #4C6D4B;        /* ready — 4.94:1 AA on #E9EEE1 */
  --fh-color-success-bg: #E9EEE1;
  --fh-color-success-text: #4C6D4B;
  --fh-color-warning: #906233;        /* prepare; was #956635 at 4.24:1, now 4.50:1 on #F6ECDB */
  --fh-color-warning-bg: #F6ECDB;
  --fh-color-warning-text: #906233;
  --fh-color-error: #8A2C26;
  --fh-color-error-text: #8A2C26;
  --fh-color-error-bg: #F8E8E6;
  --fh-color-placeholder-bg: #F3F2EB;
  --fh-color-overlay: rgba(41, 55, 47, 0.45);
  --fh-color-shadow: #44442D;

  /* Wall */
  --fh-wall-bg: #FAF8F3;
  --fh-wall-surface: #FFFDF9;
  --fh-wall-surface-2: #EEEEE6;       /* day-toggle track */
  --fh-wall-text: #29372F;            /* 11.76:1 AAA */
  --fh-wall-text-muted: #667064;      /* 4.87:1 AA */
  --fh-wall-now: #6D4C30;             /* next-event ink on peach — 6.46:1 AA */
  --fh-wall-highlight: #F3EADC;       /* next-event peach wash */
  --fh-wall-past: #5A6358;            /* past time/title; not used in the baseline mock, 5.5+:1 AA. No opacity. */

  /* Next-event (peach) */
  --fh-next-bg: #F3EADC;
  --fh-next-ink: #6D4C30;             /* 6.46:1 AA */
  --fh-next-label: #8C5E3A;           /* was #9B6740, then #90603B at 4.49:1; 4.66:1 on peach */
  --fh-next-border: #DDC2A6;
  --fh-next-bar: #B68051;             /* 4px start-edge bar; decorative, 2.84:1 — not used as text */

  /* Evening header (Tomorrow-prep), on the light wall */
  --fh-evening-bg: #344853;
  --fh-evening-ink: #F7F1DE;          /* 8.46:1 AAA */
  --fh-evening-muted: #D6DCC9;        /* 6.80:1 AA */
  --fh-evening-track: #455B62;
  --fh-evening-track-ink: #DBE0D4;    /* 5.34:1 AA */
  --fh-evening-active: #F2E6C9;
  --fh-evening-active-ink: #475249;   /* 6.59:1 AA */
  --fh-evening-symbol: #E5BF7A;

  /* Meals / tasks */
  --fh-meal-ready-ink: #4C6D4B;
  --fh-meal-ready-bg: #E9EEE1;
  --fh-meal-prepare-ink: #906233;
  --fh-meal-prepare-bg: #F6ECDB;
  --fh-meal-nocook-ink: #6E7562;      /* was #747B67 at 4.15:1, now 4.52:1 on paper */
  --fh-meal-slot: #787162;            /* was #8A8270 at 3.59:1, now 4.54:1 on paper */
  --fh-task-detail: #6D7566;          /* was #7C8574 at 3.62:1, now 4.53:1 on paper */
  --fh-tonight-ink: #8E6141;          /* was #9A6946 at 3.96:1, now 4.52:1 on #F4EBDD */
  --fh-tonight-bg: #F4EBDD;
  --fh-counter-ink: #57714D;          /* was #5C7852 at 4.10:1, now 4.52:1 on #E7ECE1 */
  --fh-counter-bg: #E7ECE1;
  --fh-cooking-bg: #F7F1E6;
  --fh-cooking-ink: #866438;          /* 4.80:1 AA */
  --fh-cooking-meta: #786D58;         /* was #8A7D65 at 3.59:1, now 4.51:1 on #F7F1E6 */
  --fh-chip-all-bg: #E9EEE5;
  --fh-chip-all-border: #DCE4D5;
  --fh-chip-all-ink: #4F6D55;         /* 4.88:1 AA */
  --fh-nav-ink: #6C7566;              /* was #7B8574 at 3.63:1, now 4.50:1 on paper */
  --fh-nav-active: #405E47;           /* 6.80:1 AA */
  --fh-nav-underline: #75906D;
  --fh-hint: #6F7469;                 /* was #888E80 at 3.18:1, now 4.51:1 on paper */
  --fh-footer: #6F746A;               /* was #8C9386 at 2.98:1, now 4.51:1 on paper */
  --fh-meta: #6C7566;                 /* was #768070 at 3.89:1, now 4.53:1 on paper */
  --fh-label: #6A7668;                /* was #6C786A at 4.37:1, now 4.50:1 on paper */
  --fh-toggle-inactive: #676E63;      /* was #6D7469 at 4.14:1 on #EEEEE6, now 4.53:1 */
  --fh-quiet-time: #8F6B4A;           /* was #9D7551 at 3.88:1, now 4.52:1 on paper */
  --fh-quiet-label: #6E7562;          /* was #7A826D at 3.77:1, now 4.52:1 */
  --fh-quiet-note: #747362;           /* was #8E8D78 at 3.18:1, now 4.51:1 */
  --fh-warm: #A3633B;                 /* was #AD693F at 4.06:1 as text, now 4.50:1; sun icon can still use the source #D0A359 */
  --fh-warm-source: #AD693F;
  --fh-sun: #D0A359;
  --fh-menu-bg: #FFFDF8;
  --fh-menu-border: #E8E6DD;
  --fh-checkbox-border: #C9CCB9;

  /* Phone chrome (parent editor) */
  --fh-phone-body: #1F2A2E;
  --fh-phone-screen: #FAF8F3;

  /* Participant accents, from the fictional portrait artwork */
  --fh-p1: #BC8664;       /* Elena (yael) */
  --fh-p1-ink: #FAF8F3;
  --fh-p2: #72949D;       /* Jonah (ori) */
  --fh-p2-ink: #FAF8F3;
  --fh-p3: #8FA16E;       /* Noah (noam) */
  --fh-p3-ink: #FAF8F3;
  --fh-p4: #A184A6;       /* Theo (tamar) */
  --fh-p4-ink: #FAF8F3;
  --fh-p5: #C09380;       /* Alma (alma) */
  --fh-p5-ink: #29372F;
  --fh-p6: #829786;       /* Ruth (rani) */
  --fh-p6-ink: #FAF8F3;
  --fh-p7: #587765;
  --fh-p7-ink: #FAF8F3;
  --fh-p8: #A3633B;
  --fh-p8-ink: #FAF8F3;
  --p1: var(--fh-p1); --p1-ink: var(--fh-p1-ink);
  --p2: var(--fh-p2); --p2-ink: var(--fh-p2-ink);
  --p3: var(--fh-p3); --p3-ink: var(--fh-p3-ink);
  --p4: var(--fh-p4); --p4-ink: var(--fh-p4-ink);
  --p5: var(--fh-p5); --p5-ink: var(--fh-p5-ink);
  --p6: var(--fh-p6); --p6-ink: var(--fh-p6-ink);
  --p7: var(--fh-p7); --p7-ink: var(--fh-p7-ink);
  --p8: var(--fh-p8); --p8-ink: var(--fh-p8-ink);

  /* Compat aliases from the previous demo (mom/dad/maya/leo) */
  --fh-person-mom: var(--fh-p1);
  --fh-person-dad: var(--fh-p2);
  --fh-person-maya: var(--fh-p3);
  --fh-person-leo: var(--fh-p4);
  --fh-person-all: var(--fh-color-primary);
  --fh-person-text: var(--fh-color-primary-text);

  /* Short aliases */
  --bg: var(--fh-color-bg);
  --surface: var(--fh-color-surface);
  --ink: var(--fh-color-text);
  --ink-muted: var(--fh-color-text-muted);
  --primary: var(--fh-color-primary);
  --primary-ink: var(--fh-color-primary-text);
  --accent: var(--fh-color-accent);
  --border: var(--fh-color-border);
  --success: var(--fh-color-success);
  --warn: var(--fh-color-warning);
  --danger: var(--fh-color-error);
  --focus: var(--fh-color-focus);
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--fh-color-focus) 45%, transparent);
  --focus-outline: 3px solid var(--fh-color-focus);

  /* Type */
  --fh-font-sans: "Heebo", system-ui, sans-serif;
  --fh-font-display: "Heebo", system-ui, sans-serif;
  --fh-font-mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", monospace;
  --font-ui: var(--fh-font-sans);
  --font-display: var(--fh-font-display);
  --font-sans: var(--fh-font-sans);

  --fh-weight-regular: 400;
  --fh-weight-medium: 500;
  --fh-weight-semibold: 600;
  --fh-weight-bold: 700;
  --weight-regular: var(--fh-weight-regular);
  --weight-medium: var(--fh-weight-medium);
  --weight-semibold: var(--fh-weight-semibold);
  --weight-bold: var(--fh-weight-bold);

  --fh-text-xs: 0.6875rem;    /* 11px */
  --fh-text-sm: 0.8125rem;    /* 13px */
  --fh-text-md: 0.9375rem;    /* 15px */
  --fh-text-lg: 1rem;         /* 16px */
  --fh-text-xl: 1.125rem;     /* 18px */
  --fh-text-2xl: 1.1875rem;   /* 19px */
  --fh-text-3xl: 1.4375rem;   /* 23px — section heading */
  --fh-text-4xl: 1.5rem;      /* 24px — default event time */
  --fh-text-5xl: 2.4375rem;   /* 39px — date title */
  --fh-text-6xl: 3.5rem;      /* 56px — quiet-day hero time */
  --text-xs: var(--fh-text-xs);
  --text-sm: var(--fh-text-sm);
  --text-md: var(--fh-text-md);
  --text-lg: var(--fh-text-lg);
  --text-xl: var(--fh-text-xl);
  --text-2xl: var(--fh-text-2xl);
  --text-3xl: var(--fh-text-3xl);
  --text-4xl: var(--fh-text-4xl);
  --text-5xl: var(--fh-text-5xl);
  --text-6xl: var(--fh-text-6xl);

  /* Wall type — Danny's hierarchy, scaled for 1–2 m viewing.
     Event titles, times and the next event are >= 24px (default title 40px,
     dense title 32px, time 28px). The clock is 88px. Secondary wall labels
     use 24px (the assembled demo and tests require this floor; 18px is the
     absolute minimum if a later restyle tightens meta only).
     Landing/SEO pages use the --fh-text-xs…6xl scale above, not these. */
  --fh-text-wall-meta: 1.5rem;          /* 24px — chips, meal slots, state, meta */
  --fh-text-wall-time: 1.75rem;         /* 28px — event times (dense); default demo times are 30px) */
  --fh-text-wall-event: 2rem;           /* 32px — dense event title (minimum for titles) */
  --fh-text-wall-event-lg: 2.5rem;      /* 40px — default event title, including 'next' */
  --fh-text-wall-heading: 2rem;         /* 32px — section h2, scaled from Danny's 23px */
  --fh-text-wall-heading-lg: 4.5rem;    /* 72px — date heading, scaled toward the 1–2 m wall */
  --fh-text-wall-display: 5.5rem;       /* 88px — wall clock */
  --text-wall-meta: var(--fh-text-wall-meta);
  --text-wall-time: var(--fh-text-wall-time);
  --text-wall-event: var(--fh-text-wall-event);
  --text-wall-event-lg: var(--fh-text-wall-event-lg);
  --text-wall-heading: var(--fh-text-wall-heading);
  --text-wall-heading-lg: var(--fh-text-wall-heading-lg);
  --text-wall-display: var(--fh-text-wall-display);

  --fh-leading-none: 1;
  --fh-leading-tight: 1.2;
  --fh-leading-snug: 1.25;
  --fh-leading-normal: 1.35;
  --fh-leading-relaxed: 1.4;
  --leading-tight: var(--fh-leading-tight);
  --leading-snug: var(--fh-leading-snug);
  --leading-normal: var(--fh-leading-normal);

  --fh-tracking-tight: -0.03em;
  --fh-tracking-normal: 0;
  --fh-tracking-wide: 0.04em;
  --fh-tracking-wall: -0.025em;

  /* Spacing — 4px grid where the baseline allows; 38/48 page inset is intentional. */
  --fh-space-1: 4px;
  --fh-space-2: 8px;
  --fh-space-3: 12px;
  --fh-space-4: 16px;
  --fh-space-5: 20px;
  --fh-space-6: 24px;
  --fh-space-7: 28px;
  --fh-space-8: 34px;
  --fh-space-9: 38px;             /* default page inset */
  --fh-space-10: 48px;            /* large-breakpoint page inset */
  --space-1: var(--fh-space-1);
  --space-2: var(--fh-space-2);
  --space-3: var(--fh-space-3);
  --space-4: var(--fh-space-4);
  --space-5: var(--fh-space-5);
  --space-6: var(--fh-space-6);
  --space-7: var(--fh-space-7);
  --space-8: var(--fh-space-8);
  --space-9: var(--fh-space-9);
  --space-10: var(--fh-space-10);
  --fh-page-inset: var(--fh-space-9);

  --fh-radius-sm: 5px;
  --fh-radius-md: 11px;
  --fh-radius-lg: 14px;
  --fh-radius-xl: 17px;
  --fh-radius-full: 999px;
  --radius-sm: var(--fh-radius-sm);
  --radius-md: var(--fh-radius-md);
  --radius-lg: var(--fh-radius-lg);
  --radius-full: var(--fh-radius-full);

  --fh-shadow-sm: 0 1px 3px #44442d0b;
  --fh-shadow-md: 0 4px 16px #3b493214;
  --fh-shadow-lg: 0 8px 28px #3b49320c;
  --fh-shadow-wall: none;
  --shadow-sm: var(--fh-shadow-sm);
  --shadow-md: var(--fh-shadow-md);
  --shadow-lg: var(--fh-shadow-lg);
  --shadow-wall: var(--fh-shadow-wall);

  --fh-avatar-phone: 26px;
  --fh-avatar-wall: 34px;
  --fh-avatar-wall-lg: 38px;
  --avatar-size-phone: var(--fh-avatar-phone);
  --avatar-size-wall: var(--fh-avatar-wall);

  --fh-target: 44px;              /* minimum interactive target */
  --fh-wall-width: 1194px;
  --fh-wall-height: 834px;
  --fh-phone-width: 390px;
  --fh-phone-height: 844px;
}

/* -------------------------------------------------------------------------- */
/* Night (landing / optional dark wall)                                       */

[data-theme="night"] {
  color-scheme: dark;

  --fh-color-bg: #1F2A2E;
  --fh-color-bg-alt: #24343A;
  --fh-color-surface: #2A3A40;
  --fh-color-text: #F7F1DE;           /* 12.4:1 AAA on #1F2A2E */
  --fh-color-text-muted: #D6DCC9;     /* 9.3:1 AAA */
  --fh-color-border: #455B62;
  --fh-color-border-strong: #5A737A;
  --fh-color-primary: #8FA894;
  --fh-color-primary-text: #1F2A2E;
  --fh-color-primary-hover: #A3BAA7;
  --fh-color-primary-on-bg: #A3BAA7;
  --fh-color-accent: #E5BF7A;
  --fh-color-accent-text: #1F2A2E;
  --fh-color-accent-on-bg: #E5BF7A;
  --fh-color-focus: #E5BF7A;
  --fh-color-success: #B7CFAE;
  --fh-color-success-bg: #2E4030;
  --fh-color-success-text: #B7CFAE;
  --fh-color-warning: #E5BF7A;
  --fh-color-warning-bg: #3A3224;
  --fh-color-warning-text: #E5BF7A;
  --fh-color-error: #E8B4AE;
  --fh-color-error-text: #E8B4AE;
  --fh-color-error-bg: #3A2A28;
  --fh-color-placeholder-bg: #24343A;
  --fh-color-overlay: rgba(0, 0, 0, 0.55);
  --fh-color-shadow: #000000;

  --fh-wall-bg: #1F2A2E;
  --fh-wall-surface: #2A3A40;
  --fh-wall-surface-2: #344853;
  --fh-wall-text: #F7F1DE;
  --fh-wall-text-muted: #D6DCC9;
  --fh-wall-now: #F2E6C9;
  --fh-wall-highlight: #3A3224;
  --fh-wall-past: #B8C0B0;

  --fh-next-bg: #3A3224;
  --fh-next-ink: #F2E6C9;
  --fh-next-label: #E5BF7A;
  --fh-next-border: #8A7350;
  --fh-next-bar: #E5BF7A;

  --fh-evening-bg: #2A3A40;
  --fh-evening-ink: #F7F1DE;
  --fh-evening-muted: #D6DCC9;
  --fh-evening-track: #455B62;
  --fh-evening-track-ink: #DBE0D4;
  --fh-evening-active: #F2E6C9;
  --fh-evening-active-ink: #475249;
  --fh-evening-symbol: #E5BF7A;

  --fh-phone-body: #141A1C;
  --fh-phone-screen: #1F2A2E;

  --fh-nav-ink: #D6DCC9;
  --fh-nav-active: #F7F1DE;
  --fh-hint: #D6DCC9;
  --fh-footer: #D6DCC9;
  --fh-meta: #D6DCC9;
  --fh-label: #D6DCC9;
  --fh-menu-bg: #2A3A40;
  --fh-menu-border: #455B62;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="day"]) {
    color-scheme: dark;

    --fh-color-bg: #1F2A2E;
    --fh-color-bg-alt: #24343A;
    --fh-color-surface: #2A3A40;
    --fh-color-text: #F7F1DE;
    --fh-color-text-muted: #D6DCC9;
    --fh-color-border: #455B62;
    --fh-color-border-strong: #5A737A;
    --fh-color-primary: #8FA894;
    --fh-color-primary-text: #1F2A2E;
    --fh-color-primary-hover: #A3BAA7;
    --fh-color-primary-on-bg: #A3BAA7;
    --fh-color-accent: #E5BF7A;
    --fh-color-accent-text: #1F2A2E;
    --fh-color-accent-on-bg: #E5BF7A;
    --fh-color-focus: #E5BF7A;
    --fh-color-success: #B7CFAE;
    --fh-color-success-bg: #2E4030;
    --fh-color-success-text: #B7CFAE;
    --fh-color-warning: #E5BF7A;
    --fh-color-warning-bg: #3A3224;
    --fh-color-warning-text: #E5BF7A;
    --fh-color-error: #E8B4AE;
    --fh-color-error-text: #E8B4AE;
    --fh-color-error-bg: #3A2A28;
    --fh-color-placeholder-bg: #24343A;
    --fh-color-overlay: rgba(0, 0, 0, 0.55);
    --fh-color-shadow: #000000;

    --fh-wall-bg: #1F2A2E;
    --fh-wall-surface: #2A3A40;
    --fh-wall-surface-2: #344853;
    --fh-wall-text: #F7F1DE;
    --fh-wall-text-muted: #D6DCC9;
    --fh-wall-now: #F2E6C9;
    --fh-wall-highlight: #3A3224;
    --fh-wall-past: #B8C0B0;

    --fh-next-bg: #3A3224;
    --fh-next-ink: #F2E6C9;
    --fh-next-label: #E5BF7A;
    --fh-next-border: #8A7350;
    --fh-next-bar: #E5BF7A;

    --fh-phone-body: #141A1C;
    --fh-phone-screen: #1F2A2E;

    --fh-nav-ink: #D6DCC9;
    --fh-nav-active: #F7F1DE;
    --fh-hint: #D6DCC9;
    --fh-footer: #D6DCC9;
    --fh-meta: #D6DCC9;
    --fh-label: #D6DCC9;
    --fh-menu-bg: #2A3A40;
    --fh-menu-border: #455B62;
  }
}