/* ==========================================================================
   IDEH SMART HOME — DUAL THEME DESIGN TOKENS (LIGHT & DARK)
   Derived from Official Brand Logo (Cobalt Blue, Electric Azure, Obsidian Black)
   Seamless switching between Clean White & High-Tech Obsidian Dark Glass
   ========================================================================== */

/* --- 1. Light Mode (Default Clean White) --- */
:root, [data-theme="light"] {
  --color-primary: #0070e0;              /* Official Brand Cobalt Blue */
  --color-primary-hover: #0059b4;        /* Rich Dark Cobalt */
  --color-primary-active: #00448a;
  --color-primary-light: #eff6ff;        /* Soft Blue Tint for Badges/Pills */
  --color-primary-glow: rgba(0, 112, 224, 0.22);

  --color-secondary: #0b2545;            /* Deep Royal Navy */
  --color-secondary-hover: #071930;
  --color-secondary-light: #f0f5fa;

  --color-accent: #1090ff;               /* Electric Azure */
  --color-accent-hover: #0080f0;
  --color-accent-soft: rgba(16, 144, 255, 0.12);

  /* Light Surfaces */
  --color-background: #f8fafc;           /* Clean Off-White */
  --color-surface: #ffffff;              /* Crisp White Surface */
  --color-surface-subtle: #f1f5f9;       /* Subtle Gray Tint */
  --color-surface-glass: rgba(255, 255, 255, 0.9);

  /* Light Borders */
  --color-border: #e2e8f0;
  --color-border-subtle: #edf2f7;
  --color-border-brand: rgba(0, 112, 224, 0.35);

  /* Light Typography */
  --color-text: #0f172a;                 /* Dark Slate Headings */
  --color-text-secondary: #334155;       /* Charcoal Body */
  --color-text-muted: #64748b;
  --color-text-on-primary: #ffffff;
  --color-text-brand: #0259b4;

  /* Glass Materials */
  --glass-bg-primary: rgba(255, 255, 255, 0.88);
  --glass-bg-elevated: rgba(255, 255, 255, 0.96);
  --glass-bg-dock: rgba(255, 255, 255, 0.9);
  --glass-bg-card: #ffffff;
  --glass-bg-modal: rgba(255, 255, 255, 0.98);

  /* Elevation Shadows */
  --shadow-liquid-sm: 0 2px 8px -2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.03);
  --shadow-liquid-md: 0 10px 25px -4px rgba(15, 23, 42, 0.08), 0 4px 10px -2px rgba(15, 23, 42, 0.04);
  --shadow-liquid-lg: 0 20px 45px -8px rgba(15, 23, 42, 0.1), 0 6px 16px -3px rgba(0, 112, 224, 0.06);
  --shadow-card: var(--shadow-liquid-md);
  --shadow-card-hover: 0 22px 50px -10px rgba(0, 112, 224, 0.16), 0 4px 12px rgba(15, 23, 42, 0.05);

  /* Ambient Mesh */
  --ambient-opacity: 0.55;
  --ambient-orb1: rgba(0, 112, 224, 0.12);
  --ambient-orb2: rgba(16, 144, 255, 0.08);
  --ambient-orb3: rgba(0, 112, 224, 0.06);
}

/* --- 2. Dark Mode (Matching Logo Obsidian Background & Azure Glow) --- */
[data-theme="dark"] {
  --color-primary: #1090ff;              /* Bright Glowing Electric Blue */
  --color-primary-hover: #38bdf8;
  --color-primary-active: #0284c7;
  --color-primary-light: rgba(16, 144, 255, 0.15);
  --color-primary-glow: rgba(16, 144, 255, 0.35);

  --color-secondary: #0070e0;
  --color-secondary-hover: #0059b4;
  --color-secondary-light: rgba(0, 112, 224, 0.2);

  --color-accent: #38bdf8;
  --color-accent-hover: #7dd3fc;
  --color-accent-soft: rgba(56, 189, 248, 0.2);

  /* Deep Obsidian Navy extracted from Logo Background (#060a12) */
  --color-background: #060a12;
  --color-surface: #0c1322;              /* Elevation Card Surface */
  --color-surface-subtle: #111b2f;       /* Input & Hover Surface */
  --color-surface-glass: rgba(12, 19, 34, 0.88);

  /* High-Tech Dark Borders */
  --color-border: rgba(255, 255, 255, 0.12);
  --color-border-subtle: rgba(255, 255, 255, 0.07);
  --color-border-brand: rgba(16, 144, 255, 0.45);

  /* Crisp Light Typography on Dark */
  --color-text: #ffffff;
  --color-text-secondary: #cbd5e1;
  --color-text-muted: #8494a7;
  --color-text-on-primary: #ffffff;
  --color-text-brand: #38bdf8;

  /* Dark Glass Materials */
  --glass-bg-primary: rgba(12, 19, 34, 0.78);
  --glass-bg-elevated: rgba(15, 25, 45, 0.88);
  --glass-bg-dock: rgba(8, 14, 26, 0.9);
  --glass-bg-card: #0d1526;
  --glass-bg-modal: rgba(8, 14, 24, 0.96);

  /* High-Tech Glow Shadows */
  --shadow-liquid-sm: 0 4px 15px rgba(0, 0, 0, 0.5), 0 0 1px 1px rgba(255, 255, 255, 0.08);
  --shadow-liquid-md: 0 12px 35px -5px rgba(0, 0, 0, 0.7), 0 0 1px 1px rgba(255, 255, 255, 0.1);
  --shadow-liquid-lg: 0 25px 60px -10px rgba(0, 0, 0, 0.85), 0 0 20px rgba(16, 144, 255, 0.2);
  --shadow-card: var(--shadow-liquid-md);
  --shadow-card-hover: 0 20px 45px -5px rgba(0, 0, 0, 0.8), 0 0 25px rgba(16, 144, 255, 0.35);

  /* Ambient Mesh Neon Glow */
  --ambient-opacity: 0.85;
  --ambient-orb1: rgba(16, 144, 255, 0.25);
  --ambient-orb2: rgba(0, 112, 224, 0.2);
  --ambient-orb3: rgba(56, 189, 248, 0.15);
}

/* --- Shared Tokens --- */
:root {
  --color-success: #10b981;
  --color-success-bg: #ecfdf5;
  --color-warning: #f59e0b;
  --color-warning-bg: #fffbeb;
  --color-danger: #ef4444;
  --color-danger-bg: #fef2f2;

  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 26px;
  --radius-xl: 36px;
  --radius-pill: 9999px;

  --font-family-fa: 'ShoorRounded', 'Vazirmatn', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-family-code: 'SF Mono', Menlo, Consolas, monospace;

  --container-max: 1240px;
  --header-height: 76px;
  --transition-smooth: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-bounce: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Custom Font Definition */
@font-face {
  font-family: 'ShoorRounded';
  src: url('../fonts/ShoorRounded-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'ShoorRounded';
  src: url('../fonts/ShoorRounded-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'ShoorRounded';
  src: url('../fonts/ShoorRounded-ExtraBold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'ShoorRounded';
  src: url('../fonts/ShoorRounded-Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}