/* ==========================================================================
   BigGyaan Design Tokens & Modern System Variables
   iOS & Android-ified Design Language: Frosted Glass, Dynamic Accents,
   Squircle Curves, Tactile Press Physics, and Multilingual Typography.
   ========================================================================== */

@font-face {
  font-family: "Noto Sans Telugu";
  src: url("../fonts/noto-sans-telugu.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Noto Sans Telugu";
  src: url("../fonts/noto-sans-telugu-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* Surfaces & Canvas (Warm, Cheerful & Sunny) */
  --bg-canvas: #faf8f5;
  --canvas-mesh: radial-gradient(at 5% 5%, rgba(249, 115, 22, 0.09) 0px, transparent 45%),
                 radial-gradient(at 95% 10%, rgba(250, 204, 21, 0.14) 0px, transparent 45%),
                 radial-gradient(at 50% 70%, rgba(16, 185, 129, 0.08) 0px, transparent 50%);
  --bg-surface: rgba(255, 255, 255, 0.90);
  --bg-surface-elevated: #ffffff;
  --bg-card: #ffffff;
  --bg-card-subtle: #f8fafc;
  --bg-glass: rgba(255, 255, 255, 0.80);
  --glass-blur: blur(20px) saturate(190%);

  /* Vibrant Multi-Color Palette: Solar Orange, Golden Yellow & Tech Green */
  --color-orange-50: #fff7ed;
  --color-orange-100: #ffedd5;
  --color-orange-200: #fed7aa;
  --color-orange-400: #fb923c;
  --color-orange-500: #f97316;
  --color-orange-600: #ea580c;
  --color-orange-700: #c2410c;

  --color-amber-50: #fefce8;
  --color-amber-100: #fef9c3;
  --color-amber-200: #fef08a;
  --color-amber-300: #fde047;
  --color-amber-400: #facc15;
  --color-amber-500: #eab308;
  --color-amber-600: #ca8a04;

  --color-green-50: #ecfdf5;
  --color-green-100: #d1fae5;
  --color-green-200: #a7f3d0;
  --color-green-400: #34d399;
  --color-green-500: #10b981;
  --color-green-600: #059669;
  --color-green-700: #047857;

  --color-blue-50: #f0f9ff;
  --color-blue-100: #e0f2fe;
  --color-blue-500: #0284c7;

  --color-purple-50: #faf5ff;
  --color-purple-100: #f3e8ff;
  --color-purple-500: #7c3aed;

  /* Semantic Brand Tokens & Playful Gradients */
  --brand-primary: var(--color-orange-600);
  --brand-gradient: linear-gradient(135deg, #f97316 0%, #ea580c 50%, #d97706 100%);
  --brand-fun-gradient: linear-gradient(135deg, #f97316 0%, #facc15 50%, #10b981 100%);
  --brand-sunset-gradient: linear-gradient(135deg, #ea580c 0%, #f59e0b 100%);
  --brand-green-gradient: linear-gradient(135deg, #10b981 0%, #059669 100%);
  --brand-yellow-gradient: linear-gradient(135deg, #fde047 0%, #f59e0b 100%);

  --brand-badge-bg: var(--color-orange-100);
  --brand-badge-border: var(--color-orange-400);

  --accent-amber: var(--color-amber-500);
  --accent-amber-bg: var(--color-amber-100);
  --accent-amber-border: var(--color-amber-400);

  --accent-green: var(--color-green-600);
  --accent-green-bg: var(--color-green-100);
  --accent-green-border: var(--color-green-400);

  --accent-tech: var(--color-blue-500);
  --accent-tech-bg: var(--color-blue-100);

  /* Typography Colors */
  --text-primary: #0f172a;
  --text-secondary: #334155;
  --text-muted: #64748b;
  --text-inverse: #ffffff;

  /* Borders & Dividers */
  --border-glass: rgba(255, 255, 255, 0.7);
  --border-light: #e2e8f0;
  --border-subtle: #cbd5e1;
  --border-interactive: rgba(249, 115, 22, 0.35);

  /* Apple & Android-style Elevation */
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.05), 0 1px 2px rgba(15, 23, 42, 0.03);
  --shadow-md: 0 8px 24px -4px rgba(15, 23, 42, 0.06), 0 2px 6px -2px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 20px 35px -8px rgba(15, 23, 42, 0.08), 0 4px 12px -3px rgba(15, 23, 42, 0.03);
  --shadow-glow: 0 0 25px rgba(249, 115, 22, 0.25);
  --shadow-glow-green: 0 0 25px rgba(16, 185, 129, 0.2);

  /* Font Families */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --font-telugu: "Noto Sans Telugu", "Kohinoor Telugu", "Gautami", "Nirmala UI", sans-serif;
  --font-indic: "Noto Sans Devanagari", "Kohinoor Devanagari", "Noto Sans Odia", var(--font-telugu), var(--font-sans);

  /* Squircles & Radius Scale */
  --radius-xs: 8px;
  --radius-sm: 14px;
  --radius-md: 20px;
  --radius-lg: 28px;
  --radius-full: 9999px;

  /* Tactile Physics */
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-press: cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: 0.15s var(--ease-press);
  --transition-smooth: 0.28s var(--ease-spring);

  /* Reading Scale */
  --body-size: 1.125rem;
  --reading-leading: 1.8;
  --reading-width: 68ch;
  --header-height: 4.25rem;
}

/* Dark Mode Overrides (Deep Midnight OLED with Neon Accent Glow) */
[data-theme="dark"] {
  color-scheme: dark;

  --bg-canvas: #080c14;
  --canvas-mesh: radial-gradient(at 5% 5%, rgba(249, 115, 22, 0.12) 0px, transparent 40%),
                 radial-gradient(at 95% 10%, rgba(234, 179, 8, 0.10) 0px, transparent 40%),
                 radial-gradient(at 50% 70%, rgba(16, 185, 129, 0.08) 0px, transparent 50%);
  --bg-surface: rgba(15, 23, 42, 0.85);
  --bg-surface-elevated: #0f172a;
  --bg-card: #0f172a;
  --bg-card-subtle: #1e293b;
  --bg-glass: rgba(15, 23, 42, 0.82);
  --border-glass: rgba(255, 255, 255, 0.1);

  --text-primary: #f8fafc;
  --text-secondary: #cbd5e1;
  --text-muted: #94a3b8;
  --text-inverse: #080c14;

  --brand-primary: var(--color-orange-400);
  --brand-gradient: linear-gradient(135deg, #fb923c 0%, #f59e0b 50%, #10b981 100%);
  --brand-badge-bg: rgba(251, 146, 60, 0.18);
  --brand-badge-border: rgba(251, 146, 60, 0.4);

  --accent-amber-bg: rgba(234, 179, 8, 0.18);
  --accent-amber-border: rgba(234, 179, 8, 0.4);
  --accent-green-bg: rgba(16, 185, 129, 0.18);
  --accent-green-border: rgba(16, 185, 129, 0.4);

  --border-light: #1e293b;
  --border-subtle: #334155;
  --border-interactive: rgba(251, 146, 60, 0.4);

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 24px -4px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 20px 35px -8px rgba(0, 0, 0, 0.65);
  --shadow-glow: 0 0 30px rgba(251, 146, 60, 0.2);
  --shadow-glow-green: 0 0 30px rgba(16, 185, 129, 0.2);
}

/* Accessible Reading Text Sizing */
[hidden] {
  display: none !important;
}

:root,
:root[data-text="standard"],
[data-text="standard"] {
  --body-size: 1.125rem;
  --reading-leading: 1.8;
}

:root[data-text="large"],
[data-text="large"] {
  --body-size: 1.4rem;
  --reading-leading: 1.88;
}

:root[data-text="xl"],
[data-text="xl"] {
  --body-size: 1.8rem;
  --reading-leading: 1.95;
}