/* ==========================================================================
   IDEH SMART HOME — DESIGN TOKENS
   iOS 26 Liquid Glass System (Derived from Official Brand Logo)
   Colors: Electric Cyan, Ocean Teal, Deep Void Charcoal, Pure Frost White
   ========================================================================== */

:root {
  /* --- Brand Color Hierarchy (Extracted from Logo) --- */
  --brand-primary: #00e5d4;           /* Electric Cyan */
  --brand-primary-hover: #14f8e6;
  --brand-secondary: #0891b2;         /* Ocean Teal */
  --brand-accent: #22d3ee;            /* Bright Cyan Glow */
  --brand-accent-soft: #38bdf8;
  
  /* --- Dark Background System --- */
  --bg-abyss: #03060a;               /* Deepest Background */
  --bg-deep: #070c14;                /* Base Page Background */
  --bg-surface: #0c1420;             /* Elevation Surface */
  --bg-surface-elevated: #111b2b;    /* High Surface */

  /* --- Text & Contrast System --- */
  --text-white: #ffffff;              /* Primary Text (Pure White) */
  --text-primary: #f8fafc;
  --text-secondary: #cbd5e1;          /* Secondary Muted Text */
  --text-muted: #8494a7;              /* Subtle Labels & Hints */
  --text-dim: #475569;
  --text-cyan: #22d3ee;

  /* --- iOS 26 Liquid Glass Materials --- */
  --glass-bg-primary: rgba(10, 18, 28, 0.68);
  --glass-bg-elevated: rgba(14, 25, 40, 0.78);
  --glass-bg-dock: rgba(7, 13, 22, 0.82);
  --glass-bg-card: rgba(11, 21, 34, 0.62);
  --glass-bg-modal: rgba(6, 12, 20, 0.88);
  
  --glass-border-subtle: rgba(255, 255, 255, 0.1);
  --glass-border-crisp: rgba(255, 255, 255, 0.18);
  --glass-border-glow: rgba(0, 229, 212, 0.35);
  --glass-border-active: rgba(34, 211, 238, 0.6);

  --glass-blur: blur(28px) saturate(190%);
  --glass-blur-heavy: blur(40px) saturate(200%);
  --glass-blur-subtle: blur(16px);

  --glass-specular-top: inset 0 1px 1px 0 rgba(255, 255, 255, 0.25);
  --glass-specular-cyan: inset 0 0 20px 0 rgba(0, 229, 212, 0.08);

  /* --- Dynamic Lighting & Glows --- */
  --glow-cyan-subtle: 0 0 35px rgba(0, 229, 212, 0.18);
  --glow-cyan-medium: 0 0 55px rgba(0, 229, 212, 0.28);
  --glow-cyan-strong: 0 0 80px rgba(0, 229, 212, 0.45);
  
  --shadow-liquid-sm: 0 10px 25px -5px rgba(0, 0, 0, 0.6), 0 0 1px 1px rgba(255, 255, 255, 0.1);
  --shadow-liquid-md: 0 20px 45px -10px rgba(0, 0, 0, 0.75), 0 0 1px 1px rgba(255, 255, 255, 0.12);
  --shadow-liquid-lg: 0 30px 70px -15px rgba(0, 0, 0, 0.85), 0 0 2px 1px rgba(0, 229, 212, 0.25);

  /* --- Radii System (Apple Human Interface) --- */
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 26px;
  --radius-xl: 36px;
  --radius-pill: 9999px;

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

  /* --- Layout & Spacing --- */
  --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);
}

/* ==========================================================================
   LIGHT THEME DESIGN TOKENS (Liquid Glass Light / Frosted Porcelain Crystal)
   ========================================================================== */
[data-theme="light"] {
  /* --- Brand Color Hierarchy (Calibrated for High Contrast & WCAG AA) --- */
  --brand-primary: #00b4d8;           /* Vivid Teal-Cyan with strong contrast */
  --brand-primary-hover: #0096c7;
  --brand-secondary: #0284c7;         /* Deep Ocean Sky */
  --brand-accent: #0284c7;
  --brand-accent-soft: #0369a1;
  
  /* --- Light Background System --- */
  --bg-abyss: #f1f5f9;               /* Clean Apple / iOS 26 Soft Canvas */
  --bg-deep: #f8fafc;                /* Base Page */
  --bg-surface: #ffffff;             /* Surface Cards */
  --bg-surface-elevated: #ffffff;

  /* --- Text & Contrast System (WCAG 2.1 AA Compliant) --- */
  --text-white: #0f172a;              /* Primary Headings & High Contrast Text (Deep Navy Slate) */
  --text-primary: #1e293b;            /* Primary Body Text */
  --text-secondary: #475569;          /* Secondary Muted Text */
  --text-muted: #64748b;              /* Subtle Labels & Hints */
  --text-dim: #94a3b8;
  --text-cyan: #0284c7;

  /* --- iOS 26 Liquid Glass Materials for Light Mode --- */
  --glass-bg-primary: rgba(255, 255, 255, 0.78);
  --glass-bg-elevated: rgba(255, 255, 255, 0.92);
  --glass-bg-dock: rgba(255, 255, 255, 0.85);
  --glass-bg-card: rgba(255, 255, 255, 0.82);
  --glass-bg-modal: rgba(255, 255, 255, 0.96);
  
  --glass-border-subtle: rgba(15, 23, 42, 0.08);
  --glass-border-crisp: rgba(15, 23, 42, 0.14);
  --glass-border-glow: rgba(0, 180, 216, 0.45);
  --glass-border-active: rgba(2, 132, 199, 0.65);

  --glass-blur: blur(28px) saturate(180%);
  --glass-blur-heavy: blur(40px) saturate(190%);
  --glass-blur-subtle: blur(16px);

  --glass-specular-top: inset 0 1px 1px 0 rgba(255, 255, 255, 0.95);
  --glass-specular-cyan: inset 0 0 20px 0 rgba(0, 180, 216, 0.08);

  /* --- Dynamic Lighting & Glows --- */
  --glow-cyan-subtle: 0 4px 20px rgba(0, 180, 216, 0.15);
  --glow-cyan-medium: 0 8px 30px rgba(0, 180, 216, 0.22);
  --glow-cyan-strong: 0 12px 45px rgba(0, 180, 216, 0.3);
  
  --shadow-liquid-sm: 0 4px 16px -2px rgba(15, 23, 42, 0.07), 0 0 1px 1px rgba(15, 23, 42, 0.05);
  --shadow-liquid-md: 0 12px 30px -4px rgba(15, 23, 42, 0.1), 0 0 1px 1px rgba(15, 23, 42, 0.07);
  --shadow-liquid-lg: 0 24px 50px -8px rgba(15, 23, 42, 0.14), 0 0 2px 1px rgba(0, 180, 216, 0.25);
}

/* 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;
}