/* closely — the theme.

   Every colour, font, radius and shadow the app uses is defined here and
   nowhere else: app.css and auth.css only ever say var(--…). To restyle the
   whole app — a new brand, a new palette, a white-label build — edit this one
   file. Tokens are named for their role (accent, surface, text), not their
   colour, so a new palette never leaves a "coral" that is actually blue.

   Contrast notes are measured against --bg; keep them when changing values:
   body text ≥ 4.5:1, large text and fills carrying white text ≥ 4.5:1. */

/* ---------------------------------------------------------------- light --- */
:root {
  /* grounds */
  --backdrop: #EFE2D6;        /* behind the phone frame on wide screens */
  --bg: #FBF3EC;              /* the app's page */
  --surface: #FFFFFF;         /* cards, sheets, inputs, the nav */
  --soft: #FFF3EA;            /* quiet panels */
  --soft-2: #FFF7F1;

  /* text */
  --text: #3A2C24;
  --text-2: #5E4C42;
  --text-3: #6B584D;
  --muted: #6E5D50;           /* 5.72:1 */
  --muted-2: #7C6A5C;         /* 4.70:1 */
  --faint: #B9A597;           /* decoration and placeholders only */
  --faint-2: #BCA99C;

  /* lines */
  --line: #F2E3D8;
  --line-2: #F7E9DF;

  /* accent — the brand colour and everything derived from it */
  --accent: #E8604C;          /* fills for decoration, rings, hearts, big display */
  --accent-strong: #C74A38;
  --accent-fill: #C74A38;     /* surfaces that carry white text — 4.70:1 */
  --accent-press: #B03C2C;
  --accent-text: #BC4231;     /* accent as small text — 4.83:1 */
  --accent-soft: #FFE4D4;
  --accent-soft-2: #FFEFE4;
  --accent-line: #F2DCCA;
  --on-accent: #FFFFFF;       /* text and icons on accent fills */

  /* meaning */
  --success: #2A7D50;         /* 4.61:1 */
  --highlight: #FFD98F;       /* the partner's mood bubble */
  --danger: #B3261E;          /* irreversible actions — 6.2:1 with white text */
  --danger-text: #B3261E;

  /* depth */
  --shadow-rgb: 120, 70, 50;
  --shadow: 0 12px 34px rgba(var(--shadow-rgb), .09);
  --shadow-sm: 0 3px 10px rgba(var(--shadow-rgb), .05);
  --scrim: rgba(58, 44, 36, .45);   /* behind sheets */
  --toast-shadow: 0 8px 20px rgba(58, 44, 36, .3);

  /* shape */
  --radius-pill: 999px;
  --radius-card: 14px;
  --radius-panel: 26px;
  --radius-frame: 34px;       /* the phone frame on wide screens */

  /* type — each script gets a face that actually has its glyphs */
  --font-body: 'Nunito', 'Segoe UI', system-ui, sans-serif;
  --font-arabic: 'Tajawal', 'Nunito', 'Segoe UI', system-ui, sans-serif;
  --font-cjk: 'Noto Sans CJK KR', 'Noto Sans CJK JP', 'Noto Sans CJK SC', 'Noto Sans CJK TC', 'Segoe UI', system-ui, sans-serif;
  --font-emoji: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', 'Segoe UI Symbol', sans-serif;

  /* component-level */
  --live-card-bg: linear-gradient(180deg, var(--accent-soft-2), var(--accent-soft));
}

/* ------------------------------------------------------------- accents ---
   The five colours a person can pick in Themes. Coral is the default above;
   the others restate only what differs, and derive their soft tints from the
   accent so the whole screen follows the choice. */
:root[data-accent="rose"] {
  --accent: #D9578C; --accent-strong: #B84071; --accent-fill: #B84071; --accent-press: #9E355F; --accent-text: #A93A67;
}
:root[data-accent="lavender"] {
  --accent: #8B6FD6; --accent-strong: #6F54BA; --accent-fill: #6F54BA; --accent-press: #5C44A0; --accent-text: #6249AD;
}
:root[data-accent="ocean"] {
  --accent: #4A8FB5; --accent-strong: #337092; --accent-fill: #337092; --accent-press: #285B78; --accent-text: #2C6585;
}
:root[data-accent="forest"] {
  --accent: #58A379; --accent-strong: #3F8760; --accent-fill: #357552; --accent-press: #2B6245; --accent-text: #2F6A4A;
}
:root[data-accent]:not([data-accent="coral"]) {
  --accent-soft: color-mix(in srgb, var(--accent) 18%, var(--bg));
  --accent-soft-2: color-mix(in srgb, var(--accent) 9%, var(--bg));
  --accent-line: color-mix(in srgb, var(--accent) 22%, var(--bg));
}

/* The swatches in Themes show each accent's own colour. */
.swatch[data-v="coral"] { background: #E8604C; }
.swatch[data-v="rose"] { background: #D9578C; }
.swatch[data-v="lavender"] { background: #8B6FD6; }
.swatch[data-v="ocean"] { background: #4A8FB5; }
.swatch[data-v="forest"] { background: #58A379; }

/* ----------------------------------------------------------------- dark --- */
html.dark {
  color-scheme: dark;
  --backdrop: #150F0B;
  --bg: #211913;
  --surface: #2C221A;
  --soft: #33261C;
  --soft-2: #2E231A;
  --text: #F3E8DE;
  --text-2: #E3D3C6;
  --text-3: #D4C2B4;
  --muted: #B29C8D;
  --muted-2: #A18B7C;
  --faint: #8A7568;
  --faint-2: #8A7568;
  --line: #3B2E24;
  --line-2: #382B21;
  --accent-soft: #4A3225;
  --accent-soft-2: #3F2B20;
  --accent-line: #4A3225;
  /* Accent and success as TEXT lighten on a dark ground: the light values
     measure ~3.3:1 here; these are 7.7:1 and 8.3:1. */
  --accent-text: #FF8D7A;
  --success: #63C793;
  --highlight: #6B4A22;
  --danger: #C8352B;
  --danger-text: #FF8A80;
  --shadow-rgb: 0, 0, 0;
  --shadow: 0 12px 34px rgba(0, 0, 0, .35);
  --shadow-sm: 0 3px 10px rgba(0, 0, 0, .25);
  --scrim: rgba(0, 0, 0, .6);
}
html.dark[data-accent]:not([data-accent="coral"]) {
  --accent-soft: color-mix(in srgb, var(--accent) 22%, var(--bg));
  --accent-soft-2: color-mix(in srgb, var(--accent) 12%, var(--bg));
  --accent-line: color-mix(in srgb, var(--accent) 28%, var(--bg));
  --accent-text: color-mix(in srgb, var(--accent) 55%, #FFFFFF);
}