/* ============================================================
   MENUPLAN DESIGN SYSTEM — TOKEN LAYER
   All skins swap CSS custom properties here.
   Components reference semantic tokens only — never raw skin values.
   ============================================================ */

/* ── Shared Scale ── */
:root {
    /* Type Scale (minor-third, 1.2 ratio) */
    --type-xs:   0.694rem;   /* ~11px */
    --type-sm:   0.833rem;   /* ~13px */
    --type-base: 1rem;       /* 16px  */
    --type-md:   1.2rem;     /* ~19px */
    --type-lg:   1.44rem;    /* ~23px */
    --type-xl:   1.728rem;   /* ~28px */
    --type-2xl:  2.074rem;   /* ~33px */
    --type-3xl:  2.488rem;   /* ~40px */

    /* Spacing (8px grid) */
    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-5:  1.25rem;
    --space-6:  1.5rem;
    --space-8:  2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;

    /* Radii */
    --radius-sm:   4px;
    --radius-md:   8px;
    --radius-lg:   16px;
    --radius-xl:   24px;
    --radius-pill: 999px;

    /* Layout */
    --nav-height:        60px;
    --header-height:     56px;
    --safe-bottom:       env(safe-area-inset-bottom, 0px);
    --content-max:       520px;

    /* Transitions */
    --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --dur-fast:    120ms;
    --dur-base:    200ms;
    --dur-slow:    350ms;
}

/* ── Semantic tokens — always aliased from active skin ── */
:root {
    /* Backgrounds */
    --bg-app:         var(--skin-bg-app);
    --bg-surface:     var(--skin-bg-surface);
    --bg-surface-alt: var(--skin-bg-surface-alt);
    --bg-elevated:    var(--skin-bg-elevated);

    /* Text */
    --text-primary:   var(--skin-text-primary);
    --text-secondary: var(--skin-text-secondary);
    --text-muted:     var(--skin-text-muted);
    --text-inverse:   var(--skin-text-inverse);
    --text-on-accent: var(--skin-text-on-accent);

    /* Borders */
    --border-subtle:  var(--skin-border-subtle);
    --border-default: var(--skin-border-default);
    --border-strong:  var(--skin-border-strong);

    /* Brand */
    --accent:         var(--skin-accent-primary);
    --accent-2:       var(--skin-accent-secondary);
    --accent-3:       var(--skin-accent-tertiary);
    --accent-muted:   var(--skin-accent-muted);

    /* Meal types */
    --meal-breakfast: var(--skin-meal-breakfast);
    --meal-lunch:     var(--skin-meal-lunch);
    --meal-dinner:    var(--skin-meal-dinner);
    --meal-snack:     var(--skin-meal-snack);

    /* Typography */
    --font-display: var(--skin-font-display);
    --font-body:    var(--skin-font-body);
    --font-mono:    var(--skin-font-mono);

    /* Card shape */
    --radius-card:  var(--skin-radius-card, 12px);
    --shadow-card:  var(--skin-shadow-card);
    --shadow-xs:    0 1px 3px rgba(0,0,0,0.07);
    --shadow-sm:    0 2px 8px rgba(0,0,0,0.08);
    --shadow-md:    0 4px 16px rgba(0,0,0,0.10);
    --shadow-lg:    0 8px 32px rgba(0,0,0,0.14);
}

/* ============================================================
   SKIN: HEARTH — Warm, Homey, Hand-crafted
   Fonts: Playfair Display + Lora
   ============================================================ */

[data-skin="hearth"] {
    --skin-font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --skin-font-body:    'Lora', Georgia, serif;
    --skin-font-mono:    'Courier Prime', 'Courier New', monospace;

    /* Hearth palette */
    --h-cream:      #FAF6F0;
    --h-linen:      #F2EBE0;
    --h-parchment:  #E5D9CB;
    --h-terracotta: #C1694F;
    --h-rust:       #A0522D;
    --h-ember:      #E8845C;
    --h-sage:       #7D8C6E;
    --h-brown:      #5C4033;
    --h-ink:        #2C1A0E;
    --h-fog:        #B4A89C;

    /* Backgrounds */
    --skin-bg-app:         var(--h-cream);
    --skin-bg-surface:     #FFFFFF;
    --skin-bg-surface-alt: var(--h-linen);
    --skin-bg-elevated:    #FFFFFF;

    /* Text */
    --skin-text-primary:   var(--h-ink);
    --skin-text-secondary: var(--h-brown);
    --skin-text-muted:     var(--h-fog);
    --skin-text-inverse:   var(--h-cream);
    --skin-text-on-accent: #FFFFFF;

    /* Borders */
    --skin-border-subtle:  var(--h-parchment);
    --skin-border-default: #D4C5B8;
    --skin-border-strong:  var(--h-rust);

    /* Accents */
    --skin-accent-primary:   var(--h-terracotta);
    --skin-accent-secondary: var(--h-ember);
    --skin-accent-tertiary:  var(--h-sage);
    --skin-accent-muted:     rgba(193,105,79,0.12);

    /* Meal types */
    --skin-meal-breakfast: #E8A838;
    --skin-meal-lunch:     #7D8C6E;
    --skin-meal-dinner:    #C1694F;
    --skin-meal-snack:     #B4A89C;

    /* Card */
    --skin-radius-card: 8px;
    --skin-shadow-card: 0 2px 0 var(--h-parchment), 0 4px 16px rgba(92,64,51,0.10);
}

[data-skin="hearth"][data-mode="dark"] {
    --skin-bg-app:         #1A110A;
    --skin-bg-surface:     #231710;
    --skin-bg-surface-alt: #2C1F15;
    --skin-bg-elevated:    #38271A;

    --skin-text-primary:   #F5EDE3;
    --skin-text-secondary: #C4AE9E;
    --skin-text-muted:     #7A6257;
    --skin-text-inverse:   #1A110A;
    --skin-text-on-accent: #FFFFFF;

    --skin-border-subtle:  #2C1F15;
    --skin-border-default: #3D2A1E;
    --skin-border-strong:  #C1694F;

    --skin-accent-primary:   #E8845C;
    --skin-accent-secondary: #C1694F;
    --skin-accent-tertiary:  #8FA07E;
    --skin-accent-muted:     rgba(232,132,92,0.15);

    --skin-shadow-card: 0 2px 0 rgba(0,0,0,0.3), 0 8px 24px rgba(0,0,0,0.40);
}

/* ============================================================
   SKIN: SLATE — Clean, Minimal, Chef's Kitchen
   Fonts: DM Serif Display + DM Sans
   ============================================================ */

[data-skin="slate"] {
    --skin-font-display: 'DM Serif Display', Georgia, serif;
    --skin-font-body:    'DM Sans', 'Helvetica Neue', Arial, sans-serif;
    --skin-font-mono:    'JetBrains Mono', 'Fira Code', monospace;

    /* Slate palette */
    --s-white:     #FAFCFB;
    --s-offwhite:  #F4F7F5;
    --s-smoke:     #E8EDEB;
    --s-mist:      #D1DDD9;
    --s-stone:     #8FA59E;
    --s-dusk:      #5C7A72;
    --s-sage:      #4A7C6F;
    --s-forest:    #2D5B52;
    --s-charcoal:  #1C2B28;
    --s-ink:       #0F1D1A;

    /* Backgrounds */
    --skin-bg-app:         var(--s-white);
    --skin-bg-surface:     #FFFFFF;
    --skin-bg-surface-alt: var(--s-offwhite);
    --skin-bg-elevated:    #FFFFFF;

    /* Text */
    --skin-text-primary:   var(--s-ink);
    --skin-text-secondary: var(--s-charcoal);
    --skin-text-muted:     var(--s-stone);
    --skin-text-inverse:   var(--s-white);
    --skin-text-on-accent: #FFFFFF;

    /* Borders */
    --skin-border-subtle:  var(--s-smoke);
    --skin-border-default: var(--s-mist);
    --skin-border-strong:  var(--s-sage);

    /* Accents */
    --skin-accent-primary:   var(--s-sage);
    --skin-accent-secondary: var(--s-forest);
    --skin-accent-tertiary:  var(--s-dusk);
    --skin-accent-muted:     rgba(74,124,111,0.10);

    /* Meal types */
    --skin-meal-breakfast: #B5936A;
    --skin-meal-lunch:     #4A7C6F;
    --skin-meal-dinner:    #2D5B52;
    --skin-meal-snack:     #8FA59E;

    /* Card */
    --skin-radius-card: 4px;
    --skin-shadow-card: 0 0 0 1px var(--s-smoke), 0 2px 8px rgba(15,29,26,0.06);
}

[data-skin="slate"][data-mode="dark"] {
    --skin-bg-app:         #0A1210;
    --skin-bg-surface:     #111C19;
    --skin-bg-surface-alt: #172220;
    --skin-bg-elevated:    #1F2E2B;

    --skin-text-primary:   #E8F0EE;
    --skin-text-secondary: #9BBAB4;
    --skin-text-muted:     #4A6560;
    --skin-text-inverse:   #0A1210;
    --skin-text-on-accent: #FFFFFF;

    --skin-border-subtle:  #1F2E2B;
    --skin-border-default: #2A3C38;
    --skin-border-strong:  #4A7C6F;

    --skin-accent-primary:   #5FA394;
    --skin-accent-secondary: #3D8072;
    --skin-accent-tertiary:  #7AB8AF;
    --skin-accent-muted:     rgba(95,163,148,0.12);

    --skin-shadow-card: 0 0 0 1px rgba(255,255,255,0.05), 0 4px 16px rgba(0,0,0,0.40);
}

/* ============================================================
   SKIN: GROVE — Farmers-Market Energy
   Fonts: Syne + Source Serif 4
   ============================================================ */

[data-skin="grove"] {
    --skin-font-display: 'Syne', Impact, sans-serif;
    --skin-font-body:    'Source Serif 4', Georgia, serif;
    --skin-font-mono:    'Courier Prime', 'Courier New', monospace;

    /* Grove palette */
    --g-chalk:    #FDFAF3;
    --g-cream:    #F5F0E4;
    --g-straw:    #EDE4C8;
    --g-sun:      #E8B84B;
    --g-gold:     #C9982A;
    --g-moss:     #4A6741;
    --g-fern:     #2F5225;
    --g-forest:   #1C3B1A;
    --g-earth:    #6B4C2A;
    --g-soil:     #3D2810;
    --g-rust:     #B85C38;

    /* Backgrounds */
    --skin-bg-app:         var(--g-chalk);
    --skin-bg-surface:     #FFFFFF;
    --skin-bg-surface-alt: var(--g-cream);
    --skin-bg-elevated:    #FFFFFF;

    /* Text */
    --skin-text-primary:   var(--g-soil);
    --skin-text-secondary: var(--g-earth);
    --skin-text-muted:     #A08C72;
    --skin-text-inverse:   var(--g-chalk);
    --skin-text-on-accent: #FFFFFF;

    /* Borders */
    --skin-border-subtle:  var(--g-straw);
    --skin-border-default: #D4C8A4;
    --skin-border-strong:  var(--g-moss);

    /* Accents */
    --skin-accent-primary:   var(--g-moss);
    --skin-accent-secondary: var(--g-sun);
    --skin-accent-tertiary:  var(--g-rust);
    --skin-accent-muted:     rgba(74,103,65,0.10);

    /* Meal types */
    --skin-meal-breakfast: #E8B84B;
    --skin-meal-lunch:     #4A6741;
    --skin-meal-dinner:    #2F5225;
    --skin-meal-snack:     #B85C38;

    /* Card */
    --skin-radius-card: 6px;
    --skin-shadow-card: 0 2px 0 var(--g-straw), 0 6px 20px rgba(61,40,16,0.10);
}

[data-skin="grove"][data-mode="dark"] {
    --skin-bg-app:         #0F1A0D;
    --skin-bg-surface:     #162013;
    --skin-bg-surface-alt: #1C2919;
    --skin-bg-elevated:    #243521;

    --skin-text-primary:   #EEE8D8;
    --skin-text-secondary: #C4B896;
    --skin-text-muted:     #5C6E50;
    --skin-text-inverse:   #0F1A0D;
    --skin-text-on-accent: #FFFFFF;

    --skin-border-subtle:  #1C2919;
    --skin-border-default: #253420;
    --skin-border-strong:  #4A6741;

    --skin-accent-primary:   #6A9162;
    --skin-accent-secondary: #D4A234;
    --skin-accent-tertiary:  #C0694A;
    --skin-accent-muted:     rgba(106,145,98,0.14);

    --skin-shadow-card: 0 2px 0 rgba(0,0,0,0.3), 0 8px 24px rgba(0,0,0,0.45);
}