/*
 * tokens.css — design tokens for the client mobile-first reskin.
 *
 * Derived from Jenny's Canva mockups in docs/mockups/ (2026-08-06). Values were
 * sampled from HomePage.png, Daily Water.png and Food Log.png. They are a
 * working baseline, not a signed-off palette — see the note at the bottom.
 *
 * THIS FILE CHANGES NOTHING ON ITS OWN. It declares custom properties on :root
 * and nothing else — no selectors that match existing markup, no element rules.
 * Deploying it is visually inert by construction. Screens opt in one at a time.
 *
 * Loaded before components.css and page CSS in customer/layouts/header.blade.php.
 */

:root {

    /* ---------------------------------------------------------------
     * Brand
     *
     * The teal→blue gradient is the primary action colour throughout the
     * mockups: the Daily Progress card, "Add Water", "Add Entry".
     * ------------------------------------------------------------ */

    --ds-teal:            #12b5a5;
    --ds-teal-dark:       #0e9c8e;
    --ds-teal-tint:       #def5f1;

    --ds-blue:            #1f8fe0;
    --ds-blue-dark:       #1673c4;
    --ds-blue-tint:       #e7f1fc;

    --ds-gradient:        linear-gradient(90deg, var(--ds-teal) 0%, var(--ds-blue) 100%);

    /* Bottom-nav active state and the floating action button. */
    --ds-pink:            #ec2a6b;
    --ds-pink-dark:       #d81f5d;   /* hover — the hex already hardcoded at dashboard.css:171 */
    --ds-pink-tint:       #fce4ee;

    /* ---------------------------------------------------------------
     * Text and surfaces
     * ------------------------------------------------------------ */

    --ds-text:            #0e2340;   /* headings, primary copy */
    --ds-text-muted:      #64748b;   /* subtitles, secondary copy */
    --ds-text-subtle:     #94a3b8;   /* captions, meta, timestamps */
    --ds-text-invert:     #ffffff;

    --ds-bg:              #f5f7fa;   /* page background */
    --ds-surface:         #ffffff;   /* cards, sheets */
    --ds-border:          #e8edf2;   /* card outline */
    --ds-divider:         #eff2f6;   /* row separators */

    /* ---------------------------------------------------------------
     * Category accents
     *
     * Used for the left accent bar on meal cards and the pastel icon
     * chips in task lists. Each has a tint for the chip background.
     * ------------------------------------------------------------ */

    --ds-amber:           #f5a623;
    --ds-amber-tint:      #fdf0dc;
    --ds-purple:          #7c4dff;
    --ds-purple-tint:     #efe8fe;
    --ds-indigo:          #2f80ed;
    --ds-indigo-tint:     #e4effc;

    /* ---------------------------------------------------------------
     * Semantic
     * ------------------------------------------------------------ */

    --ds-success:         var(--ds-teal);
    --ds-warning:         var(--ds-amber);
    --ds-danger:          #e5484d;
    --ds-danger-tint:     #fdecec;

    /* ---------------------------------------------------------------
     * Type
     *
     * Poppins deliberately: style.css already imports it and it is the
     * app's existing face. The mockups look closer to Inter/SF, but
     * swapping the family app-wide is a bigger and riskier change than
     * this workstream should make. Revisit with Jenny.
     * ------------------------------------------------------------ */

    --ds-font:            'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;

    --ds-size-display:    2.25rem;   /* 36px — "Jenny" on Home */
    --ds-size-h1:         1.75rem;   /* 28px — page titles */
    --ds-size-h2:         1.25rem;   /* 20px — card titles */
    --ds-size-h3:         1.0625rem; /* 17px — list row titles */
    --ds-size-label:      0.9375rem; /* 15px — uppercase section labels */
    --ds-size-body:       1rem;      /* 16px — never smaller on inputs */
    --ds-size-sm:         0.875rem;  /* 14px */
    --ds-size-xs:         0.75rem;   /* 12px */

    --ds-weight-regular:  400;
    --ds-weight-medium:   500;
    --ds-weight-semibold: 600;
    --ds-weight-bold:     700;

    --ds-leading-tight:   1.15;
    --ds-leading-snug:    1.3;
    --ds-leading-normal:  1.5;

    --ds-tracking-label:  0.04em;

    /* ---------------------------------------------------------------
     * Space — 4px base
     * ------------------------------------------------------------ */

    --ds-space-1:   0.25rem;   /*  4px */
    --ds-space-2:   0.5rem;    /*  8px */
    --ds-space-3:   0.75rem;   /* 12px */
    --ds-space-4:   1rem;      /* 16px */
    --ds-space-5:   1.25rem;   /* 20px */
    --ds-space-6:   1.5rem;    /* 24px */
    --ds-space-8:   2rem;      /* 32px */
    --ds-space-10:  2.5rem;    /* 40px */

    /* ---------------------------------------------------------------
     * Radius, shadow, layout
     * ------------------------------------------------------------ */

    --ds-radius-sm:    8px;
    --ds-radius-md:    12px;
    --ds-radius-lg:    16px;    /* cards */
    --ds-radius-xl:    20px;
    --ds-radius-sheet: 28px;    /* bottom-sheet top corners */
    --ds-radius-pill:  999px;

    --ds-shadow-sm: 0 1px 2px rgba(14, 35, 64, 0.04);
    --ds-shadow-md: 0 1px 2px rgba(14, 35, 64, 0.04), 0 4px 16px rgba(14, 35, 64, 0.06);
    --ds-shadow-lg: 0 8px 32px rgba(14, 35, 64, 0.12);

    --ds-gutter:    1rem;    /* 16px page padding on phones */
    --ds-page-max:  720px;   /* content stops widening past this */

    /* Minimum tap target. Matches the floor already in foundation.css. */
    --ds-tap:       44px;
}

/*
 * Breakpoints (documentation only — custom properties cannot be used in media
 * queries). New CSS is mobile-first: base styles are the phone, `min-width`
 * adds larger screens. Never add another `max-width` query.
 *
 *     sm   480px    large phone
 *     md   768px    tablet / the app's existing desktop cutover
 *     lg  1024px    laptop
 *
 * NOT SIGNED OFF: these values are sampled from PNGs, not supplied by Jenny.
 * Two known inconsistencies in the mockups themselves, worth resolving with her
 * before this hardens:
 *   - The MYLF wordmark is orange/pink on HomePage, teal/blue on Daily Water,
 *     and teal/purple on Food Log.
 *   - The bottom-nav action button is pink on HomePage and blue on Food Log.
 * Neither is codified here; both are listed in docs/mobile-first-plan.md.
 */