/* ==========================================================================
   MôjPoradca Public Pages — Design System
   Light: mojporadca_core (Professional Warmth, Deep Navy #002045)
   Dark:  agro_professional_night (Agro Green #88d982, Deep Obsidian #051424)
   Mirrors mobile/src/theme/variables.css token set for cross-platform consistency.
   ========================================================================== */

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

:root {
  /* ------------------------------------------------------------------
     Primary — Deep Navy (#002045)
     ------------------------------------------------------------------ */
  --primary: #002045;
  --on-primary: #ffffff;
  --primary-container: #1a365d;
  --on-primary-container: #86a0cd;

  /* Brand logo — OVB Blue */
  --brand-logo: #025ab2;

  /* ------------------------------------------------------------------
     Secondary — Slate Blue
     ------------------------------------------------------------------ */
  --secondary: #505f76;
  --on-secondary: #ffffff;
  --secondary-container: #d0e1fb;
  --on-secondary-container: #54647a;

  /* ------------------------------------------------------------------
     Tertiary — Soft Gold
     ------------------------------------------------------------------ */
  --tertiary: #2d1e00;
  --on-tertiary: #ffffff;
  --tertiary-container: #483200;
  --on-tertiary-container: #be9953;

  /* ------------------------------------------------------------------
     Error
     ------------------------------------------------------------------ */
  --error: #ba1a1a;
  --on-error: #ffffff;
  --error-container: #ffdad6;
  --on-error-container: #93000a;

  /* ------------------------------------------------------------------
     Background & Surface — Light mode
     ------------------------------------------------------------------ */
  --background: #faf9fd;
  --on-background: #1a1c1e;
  --surface: #faf9fd;
  --surface-dim: #dad9dd;
  --surface-bright: #ffffff;
  --surface-variant: #e3e2e6;

  /* Surface container hierarchy (light) */
  --surface-container-lowest: #ffffff;
  --surface-container-low: #f4f3f7;
  --surface-container: #efedf1;
  --surface-container-high: #e9e7eb;
  --surface-container-highest: #e3e2e6;

  /* On-surface */
  --on-surface: #1a1c1e;
  --on-surface-variant: #43474e;

  /* Outline */
  --outline: #74777f;
  --outline-variant: #c4c6cf;

  /* Surface tint */
  --surface-tint: #455f88;

  /* Inverse */
  --inverse-surface: #2f3033;
  --inverse-on-surface: #f4f3f7;
  --inverse-primary: #88d982;

  /* Fixed colors */
  --primary-fixed: #d6e3ff;
  --primary-fixed-dim: #adc7f7;
  --on-primary-fixed: #001b3c;
  --on-primary-fixed-variant: #2d476f;

  --secondary-fixed: #d3e4fe;
  --secondary-fixed-dim: #b7c8e1;
  --on-secondary-fixed: #132c4a;
  --on-secondary-fixed-variant: #3f5a7e;

  --tertiary-fixed: #ffdea5;
  --tertiary-fixed-dim: #e9c176;
  --on-tertiary-fixed: #261900;
  --on-tertiary-fixed-variant: #57492e;

  /* ------------------------------------------------------------------
     Shadows — Light mode
     ------------------------------------------------------------------ */
  --card-shadow: 0px 4px 20px rgba(0, 0, 0, 0.05);
}

/* ==========================================================================
   Dark Mode
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  :root {
    /* Primary — Signature Agro Green */
    --primary: #88d982;
    --on-primary: #003909;
    --primary-container: #2e7d32;
    --on-primary-container: #cbffc2;

    /* Brand logo — OVB Blue */
    --brand-logo: #025ab2;

    /* Secondary — Soft Blue */
    --secondary: #adc7f7;
    --on-secondary: #133057;
    --secondary-container: #2f4a72;
    --on-secondary-container: #9fb9e8;

    /* Tertiary — Cool Grey-Blue */
    --tertiary: #bec6e0;
    --on-tertiary: #283044;
    --tertiary-container: #656d84;
    --on-tertiary-container: #eef0ff;

    /* Error */
    --error: #ffb4ab;
    --on-error: #690005;
    --error-container: #93000a;
    --on-error-container: #ffdad6;

    /* Background & Surface — Deep Navy Obsidian */
    --background: #051424;
    --on-background: #d4e4fa;
    --surface: #051424;
    --surface-dim: #051424;
    --surface-bright: #2c3a4c;
    --surface-variant: #273647;

    /* Surface container hierarchy (dark) */
    --surface-container-lowest: #010f1f;
    --surface-container-low: #0d1c2d;
    --surface-container: #122131;
    --surface-container-high: #1c2b3c;
    --surface-container-highest: #273647;

    /* On-surface */
    --on-surface: #d4e4fa;
    --on-surface-variant: #bfcaba;

    /* Outline */
    --outline: #8a9485;
    --outline-variant: #40493d;

    /* Surface tint */
    --surface-tint: #88d982;

    /* Inverse */
    --inverse-surface: #d4e4fa;
    --inverse-on-surface: #233143;
    --inverse-primary: #1b6d24;

    /* Fixed colors */
    --primary-fixed: #a3f69c;
    --primary-fixed-dim: #88d982;
    --on-primary-fixed: #002204;
    --on-primary-fixed-variant: #005312;

    --secondary-fixed: #d6e3ff;
    --secondary-fixed-dim: #adc7f7;
    --on-secondary-fixed: #001b3c;
    --on-secondary-fixed-variant: #2d476f;

    --tertiary-fixed: #dae2fd;
    --tertiary-fixed-dim: #bec6e0;
    --on-tertiary-fixed: #131b2e;
    --on-tertiary-fixed-variant: #3f465c;

    /* Shadows — Dark mode (minimal, tonal layers instead) */
    --card-shadow: 0px 1px 0px rgba(255, 255, 255, 0.04);
  }
}

/* ==========================================================================
   Complex Product Page — Glassmorphism & Gradient Utilities
   ========================================================================== */
.glass-panel {
  background: rgba(26, 54, 93, 0.6);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.glass-card {
  background: #122131;
  border: 1px solid #273647;
  border-radius: 1rem;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.glass-card:hover {
  border-color: #40493d;
  transform: translateY(-2px);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
}
.text-gradient {
  background: linear-gradient(135deg, #a9c7ff 0%, #1565c0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.glow-primary {
  position: relative;
}
.glow-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(2, 90, 178, 0.08) 0%, transparent 70%);
  pointer-events: none;
}

@media (prefers-color-scheme: light) {
  .glass-panel {
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(0, 0, 0, 0.06);
  }
  .glass-card {
    background: #ffffff;
    border: 1px solid #c4c6cf;
  }
  .glass-card:hover {
    border-color: #74777f;
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.15);
  }
  .text-gradient {
    background: linear-gradient(135deg, #1a365d 0%, #002045 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
}