/* ============================================================
   La Dolce Vita — Design Tokens
   Single source of truth for all visual decisions.
   ============================================================ */

:root {
  /* --- Brand Colours --- */
  --sage:            #6BA892;
  --sage-dark:       #4E8A76;
  --sage-light:      #E8F4F0;
  --coral:           #E07B5F;
  --coral-dark:      #C5623F;
  --coral-light:     #FDEAE5;
  --gold:            #F0A830;
  --gold-dark:       #D48E18;
  --gold-light:      #FEF5DC;
  --sky:             #5B9FD4;
  --sky-light:       #E5F1FB;
  --lavender:        #8B7DC0;
  --lavender-light:  #EDE9F8;
  --rose:            #D46B8B;
  --rose-light:      #FBEBF0;
  --teal:            #4CA8A0;
  --teal-light:      #E5F5F4;
  --amber:           #E8923A;
  --amber-light:     #FEF0E2;

  /* --- Neutrals (Light Mode) --- */
  --color-bg:        #FDFAF5;
  --color-surface:   #FFFFFF;
  --color-surface-2: #F7F4EE;
  --color-ink:       #2C3149;
  --color-body:      #4B5268;
  --color-muted:     #8490A8;
  --color-border:    #EAE6DC;
  --color-divider:   #F2EFE8;

  /* --- Semantic --- */
  --color-primary:   var(--sage);
  --color-accent:    var(--coral);
  --color-success:   #4CAF82;
  --color-warning:   var(--gold);
  --color-danger:    #E05555;
  --color-info:      var(--sky);

  /* --- Module Identity Colours --- */
  --mod-calendar:    var(--sage);
  --mod-school:      var(--sky);
  --mod-food:        var(--gold);
  --mod-tasks:       var(--coral);
  --mod-finance:     var(--lavender);
  --mod-property:    #78909C;
  --mod-helpers:     var(--amber);
  --mod-vehicles:    #5B7FA6;
  --mod-documents:   #6D7F99;
  --mod-chat:        var(--teal);
  --mod-noticeboard: var(--rose);
  --mod-settings:    var(--color-muted);

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

  /* --- Border Radius --- */
  --r-sm:   0.5rem;
  --r-md:   1rem;
  --r-lg:   1.5rem;
  --r-xl:   2rem;
  --r-full: 9999px;

  /* --- Shadows --- */
  --shadow-xs: 0 1px 2px rgba(44,49,73,0.05);
  --shadow-sm: 0 1px 4px rgba(44,49,73,0.07), 0 1px 2px rgba(44,49,73,0.04);
  --shadow-md: 0 4px 14px rgba(44,49,73,0.09), 0 2px 4px rgba(44,49,73,0.05);
  --shadow-lg: 0 12px 32px rgba(44,49,73,0.13), 0 4px 8px rgba(44,49,73,0.06);
  --shadow-xl: 0 24px 48px rgba(44,49,73,0.16), 0 8px 16px rgba(44,49,73,0.08);

  /* --- Typography --- */
  --font:       'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-serif: 'Georgia', 'Times New Roman', serif;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;

  --weight-normal:    400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;

  --leading-tight:  1.25;
  --leading-snug:   1.375;
  --leading-normal: 1.5;
  --leading-relaxed:1.625;

  /* --- Motion --- */
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:    cubic-bezier(0, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   350ms;
  --dur-slower: 500ms;

  /* --- Layout --- */
  --nav-height:    64px;
  --fab-size:      56px;
  --header-height: 60px;
  --safe-bottom:   env(safe-area-inset-bottom, 0px);
  --page-padding:  var(--sp-4);
  --max-width:     480px;

  /* --- Z-index Scale --- */
  --z-base:     1;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;
  --z-nav:      600;
  --z-fab:      700;
}

/* --- Dark Mode --- */
[data-theme="dark"] {
  --color-bg:        #1C1E2B;
  --color-surface:   #252836;
  --color-surface-2: #2E3145;
  --color-ink:       #EAE8F2;
  --color-body:      #B2B8CE;
  --color-muted:     #727A98;
  --color-border:    #353A52;
  --color-divider:   #2C3044;

  --sage-light:      rgba(107, 168, 146, 0.15);
  --coral-light:     rgba(224, 123, 95, 0.15);
  --gold-light:      rgba(240, 168, 48, 0.15);
  --sky-light:       rgba(91, 159, 212, 0.15);
  --lavender-light:  rgba(139, 125, 192, 0.15);
  --rose-light:      rgba(212, 107, 139, 0.15);
  --teal-light:      rgba(76, 168, 160, 0.15);
  --amber-light:     rgba(232, 146, 58, 0.15);

  --shadow-xs: 0 1px 2px rgba(0,0,0,0.3);
  --shadow-sm: 0 1px 4px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 14px rgba(0,0,0,0.45);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.5);
  --shadow-xl: 0 24px 48px rgba(0,0,0,0.6);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg:        #1C1E2B;
    --color-surface:   #252836;
    --color-surface-2: #2E3145;
    --color-ink:       #EAE8F2;
    --color-body:      #B2B8CE;
    --color-muted:     #727A98;
    --color-border:    #353A52;
    --color-divider:   #2C3044;
    --sage-light:      rgba(107, 168, 146, 0.15);
    --coral-light:     rgba(224, 123, 95, 0.15);
    --gold-light:      rgba(240, 168, 48, 0.15);
    --shadow-md:       0 4px 14px rgba(0,0,0,0.45);
  }
}