/* ==========================================================================
   theme.css: WhiskThis's look, "Rosewater" (app-owned, never overwritten by
   upgrades). Every page loads it after the scaffold's style.css.

   The scaffold's "Field" shape (soft 12/18px corners, gentle shadows,
   mixed-case headings) in WhiskThis's own fonts, Playfair Display and Inter,
   and its rose on warm cream. Light is WhiskThis's default; dark is kept so
   the scaffold's Appearance setting still works.

   - accent-fill #a3616b is today's .btn-primary hover rose (white text 4.7:1);
     today's #b76e79 stays as --rose for the logo, meters and chart bars only,
     because white text on it is 3.8:1.
   - Every text pair is 4.5:1 or better in both modes; border-strong is 3:1+.
   - Status colors are set here too, tuned to the cream and charcoal.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Playfair+Display:wght@600;700&display=swap');

/* ---- Look: type and shape ---- */
:root {
    --font-display: 'Playfair Display', Georgia, serif;
    --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-num: var(--font-body);           /* figures in Inter, tabular */

    --body-size: 15px;
    --display-weight: 700;
    --display-case: none;
    --display-track: -0.01em;
    --title-size: 34px;
    --stat-size: 30px;

    --radius-sm: 6px;
    --radius: 12px;
    --radius-lg: 18px;
}

/* ---- Dark: rose on warm charcoal ---- */
:root {
    color-scheme: dark;

    --bg: #1c1716;
    --surface: #251e1c;
    --surface-2: #2f2725;
    --border: #3d3330;
    --border-strong: #85756f;               /* 3.7:1 on surface */
    --text: #f3ebe6;
    --muted: #b5a69d;                        /* 6.9:1 on surface */

    --accent: #e8a9b2;                       /* 9.1:1 on bg */
    --accent-fill: #d98f9a;
    --on-accent: #2a1216;                    /* 7.0:1 on accent-fill */
    --accent-soft: rgba(217, 143, 154, 0.16);
    --focus: #f3c6cc;
    --rose: #d98f9a;

    --success: #86d3a6;  --success-soft: rgba(134, 211, 166, 0.14);  --success-border: rgba(134, 211, 166, 0.35);
    --warning: #f2c46d;  --warning-soft: rgba(242, 196, 109, 0.14);  --warning-border: rgba(242, 196, 109, 0.35);
    --danger: #f19a8a;   --danger-soft: rgba(241, 154, 138, 0.14);   --danger-border: rgba(241, 154, 138, 0.35);
    --danger-fill: #c2412d;  --on-danger: #ffffff;
    --info: #9fcbea;     --info-soft: rgba(159, 203, 234, 0.14);     --info-border: rgba(159, 203, 234, 0.35);

    --scrim: rgba(10, 8, 6, 0.6);
    --shadow-panel: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.18);
    --shadow-overlay: 0 24px 48px -12px rgba(0, 0, 0, 0.6);

    /* App tokens (app.css) */
    --charlie: #c99aef;                      /* 7.3:1 on surface */
    --teddy: #6fcf97;
}

/* ---- Light (WhiskThis default): rose on warm cream ---- */
:root[data-theme="light"] {
    color-scheme: light;

    --bg: #faf5f1;                           /* today's cream gradient, flattened */
    --surface: #ffffff;
    --surface-2: #f4ebe5;
    --border: #ecdfd8;
    --border-strong: #8f7d74;               /* 3.9:1 on surface */
    --text: #2c2420;                         /* today's body text; 14.1:1 on bg */
    --muted: #6e5f58;                        /* 5.6:1 on bg, 5.2:1 on surface-2 */

    --accent: #8e4f59;                       /* links; 5.7:1 on bg, 5.2:1 on accent-soft */
    --accent-fill: #a3616b;                  /* today's hover rose; white 4.7:1 */
    --on-accent: #ffffff;
    --accent-soft: #f7e9eb;
    --focus: #7c3f4a;
    --rose: #b76e79;                         /* today's rose: logo, meters, bars */

    --success: #1f7a4a;  --success-soft: #e5f4ea;  --success-border: #b9e0c7;
    --warning: #7a5000;  --warning-soft: #fbf1dc;  --warning-border: #ecd3a0;
    --danger: #b42318;   --danger-soft: #fdecea;   --danger-border: #f5c2bc;
    --danger-fill: #b42318;  --on-danger: #ffffff;
    --info: #1f5f8b;     --info-soft: #e6f0f7;     --info-border: #bcd6ea;

    --scrim: rgba(44, 36, 32, 0.35);
    --shadow-panel: 0 1px 2px rgba(44, 36, 32, 0.05), 0 6px 20px -8px rgba(168, 153, 142, 0.35);
    --shadow-overlay: 0 24px 48px -12px rgba(44, 36, 32, 0.25);

    --charlie: #7a3fc0;                      /* 6.4:1 on surface */
    --teddy: #15803d;                        /* 5.0:1 on surface */
}

/* ---- Paper (baking_print.php sheets): ink on white whatever the theme ---- */
:root {
    --paper: #ffffff;
    --ink: #1f1a17;
    --ink-muted: #5c504a;                    /* 7.6:1 on paper */
    --ink-faint: #75665f;                    /* 5.5:1 on paper */
    --paper-tint: #f8f2ee;
    --paper-rule: #e3d8d1;
    --paper-rule-strong: #a8968d;
    --paper-accent: #8e4f59;
}