/* Studio Minna - Design Tokens & Variables */
:root {
  /* Color Palette */
  --color-primary: #000000;
  --color-secondary: #545A62;
  --color-text-white: #FFFFFF;
  --color-text-dark: #2B303A;
  --color-text-muted: #7E899B;
  --color-accent: #9FDDD1;
  --color-accent-hover: #B9F8EC;
  --color-teal: #3F8A7C;
  --color-teal-dark: #2D655A;
  --color-bg-light: #F8FFFB;
  --color-bg-dark: #586679;
  --color-bg-darker: #3E4B5B;
  --color-bg-footer: #53797b;
  --color-overlay: rgba(0, 0, 0, 0.55);
  --color-overlay-dark: rgba(20, 28, 38, 0.75);
  --color-border: rgba(255, 255, 255, 0.18);
  --color-border-light: rgba(0, 0, 0, 0.08);

  /* Typography */
  --font-family-base: 'Montserrat', sans-serif;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Layout */
  --container-max-width: 1140px;
  --container-narrow: 860px;
  --container-wide: 1280px;
  --header-height: 96px;
  --header-height-scrolled: 74px;
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 16px;

  /* Transitions & Shadows */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.35s cubic-bezier(0.25, 1, 0.5, 1);
  --transition-slow: 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 10px 25px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 20px 45px rgba(0, 0, 0, 0.22);
  --shadow-glow: 0 0 25px rgba(159, 221, 209, 0.35);

  /* Z-Index Hierarchy */
  --z-base: 1;
  --z-header: 100;
  --z-drawer: 200;
  --z-modal-backdrop: 300;
  --z-modal: 310;
}