/* ============================================================
   PALETTE.CSS
   Shared design tokens — condensed retro-inspired pastel palette.
   Include BEFORE any page-specific CSS (studio, dashboard, etc.)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;600;700;800&family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;1,300&display=swap');

:root {
    /* ── Surface & background (Everyday theme = default) ──── */
    --s-bg:            #f8f5f2;
    --s-surface:       #ffffff;
    --s-surface-2:     #faf7f4;

    /* ── Borders ──────────────────────────────────────────── */
    --s-border:        #e8dfd5;
    --s-border-hover:  #d4c8b8;

    /* ── Text hierarchy ───────────────────────────────────── */
    --s-text:          #3d3530;
    --s-text-mid:      #8a7d72;
    --s-text-muted:    #b5a99b;

    /* ── Primary accent (warm lilac) ─────────────────────── */
    --s-accent:        #a88bc2;
    --s-accent-light:  #f3eef8;

    /* ── Sidebar ──────────────────────────────────────────── */
    --s-sidebar-bg:    #f0ebe4;

    /* ── Semantic pastels ─────────────────────────────────── */
    --s-gold:          #c89b3c;
    --s-gold-bg:       #fdf4dc;
    --s-teal:          #47b5ab;
    --s-teal-bg:       #e0f5f2;
    --s-rose:          #eb7374;
    --s-rose-bg:       #fce8e8;
    --s-indigo:        #6a71e5;
    --s-indigo-bg:     #e8e9fc;
    --s-complete:      #69b6f3;
    --s-complete-bg:   #e4f1fd;

    /* ── Shape & motion ───────────────────────────────────── */
    --radius-card:     14px;
    --radius-btn:      10px;
    --transition:      0.16s cubic-bezier(0.4,0,0.2,1);

    /* ── V2 layout tokens (used by _LayoutV2 + Phase 1+ surfaces) ──
       --breakpoint-md is documentation of the canonical breakpoint;
       CSS @media rules cannot reference custom properties at parse
       time, so the literal 768px also appears in the @media queries
       in v2-shell.css and now.css. If this changes, update both. */
    --breakpoint-md:   768px;
    --sidebar-width:   240px;
    --space-page:      20px;
    --space-bottom-clearance: 80px;
    --radius-card-lg:  20px;
    --radius-pill:     999px;
}