/* ==========================================================================
   Design Tokens — PetLife App
   Based on Learning Framework tokens. Light theme default (mobile-first PWA).
   Pet type theming via [data-pet-type="dog"|"cat"].
   ========================================================================== */

:root {
  /* --- Colour: Light theme (default) --- */
  --color-bg-main:      #F6F8FA;
  --color-bg-card:      #FFFFFF;
  --color-text-main:    #1F2328;
  --color-text-sub:     #656D76;
  --color-accent:       #FF6B6B;
  --color-success:      #00C853;
  --color-warning:      #FFB300;
  --color-danger:       #FF5252;

  --shadow-card:        0 1px 3px rgba(0, 0, 0, 0.12),
                        0 1px 2px rgba(0, 0, 0, 0.08);
  --shadow-elevated:    0 4px 12px rgba(0, 0, 0, 0.15);

  /* --- Spacing (8px grid) --- */
  --space-xs:           4px;
  --space-sm:           8px;
  --space-md:           16px;
  --space-lg:           24px;
  --space-xl:           32px;
  --space-2xl:          48px;

  /* --- Typography --- */
  --font-family:        'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                        Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue',
                        sans-serif;
  --font-size-xs:       0.75rem;
  --font-size-sm:       0.875rem;
  --font-size-base:     1rem;
  --font-size-md:       1.125rem;
  --font-size-lg:       1.25rem;
  --font-size-xl:       1.5rem;
  --font-size-2xl:      2rem;
  --font-size-hero:     3rem;

  --line-height-tight:  1.2;
  --line-height-base:   1.5;
  --line-height-loose:  1.75;

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold:   700;

  /* --- Border radius --- */
  --radius-sm:          6px;
  --radius-md:          12px;
  --radius-lg:          16px;
  --radius-full:        9999px;

  /* --- Timing --- */
  --timing-fast:        150ms;
  --timing-normal:      300ms;
  --timing-slow:        500ms;

  /* --- Z-index layers --- */
  --z-base:             1;
  --z-sticky:           100;
  --z-modal:            1000;
  --z-toast:            1100;
  --z-celebration:      1200;
}

/* === Dark theme === */
[data-theme="dark"] {
  --color-bg-main:      #0D1117;
  --color-bg-card:      #21262D;
  --color-text-main:    #E6EDF3;
  --color-text-sub:     #8B949E;
  --shadow-card:        none;
  --shadow-elevated:    0 4px 12px rgba(0, 0, 0, 0.4);
}

/* === Dog theme (default) === */
[data-pet-type="dog"] {
  --color-accent:       #FF6B6B;
}

/* === Cat theme === */
[data-pet-type="cat"] {
  --color-accent:       #FFA500;
}