@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap');

/* Skeuomorphic & Neumorphic Design System Tokens */
:root, [data-theme="light"] {
    --font-ar: 'Tajawal', 'IBM Plex Sans Arabic', system-ui, sans-serif;
    --font-ku: 'Vazirmatn', 'Tajawal', system-ui, sans-serif;
    --font-en: 'Inter', system-ui, -apple-system, sans-serif;
    --font-logo-title: 'Chakra Petch', 'Orbitron', system-ui, sans-serif;
    --font-mono: 'Share Tech Mono', 'IBM Plex Mono', monospace;

    --bg-paper: #e6ebf2;
    --bg-surface: #e6ebf2;
    --text-ink: #1e293b;
    --text-muted: #64748b;
    --border-line: rgba(255, 255, 255, 0.7);
    --border-dark: rgba(163, 177, 198, 0.4);
    
    /* Tactile Shadows (Convex & Concave) */
    --shadow-drop: 9px 9px 18px #c2c8d4, -9px -9px 18px #ffffff;
    --shadow-drop-hover: 12px 12px 24px #b8bfc9, -12px -12px 24px #ffffff;
    --shadow-inset: inset 6px 6px 12px #c2c8d4, inset -6px -6px 12px #ffffff;
    --shadow-pressed: inset 4px 4px 8px #b8bfc9, inset -4px -4px 8px #ffffff;
    
    --text-emboss: 1px 1px 0px #ffffff;
    --accent-cyan: #0284c7;
    --accent-glow: 0 0 15px rgba(2, 132, 199, 0.35);
    --brand-mark-bg: #e6ebf2;
    --card-bg: #e6ebf2;
    
    /* Dark Panel Colors */
    --panel-dark-bg: #1e293b;
    --panel-dark-shadow: inset 5px 5px 12px #0f172a, inset -5px -5px 12px #2d3d56;
}

[data-theme="dark"] {
    --bg-paper: #121620;
    --bg-surface: #121620;
    --text-ink: #f1f5f9;
    --text-muted: #94a3b8;
    --border-line: rgba(255, 255, 255, 0.06);
    --border-dark: rgba(0, 0, 0, 0.6);
    
    /* Tactile Shadows (Convex & Concave Dark Mode) */
    --shadow-drop: 8px 8px 18px #0a0d13, -8px -8px 18px #1a1f2d;
    --shadow-drop-hover: 12px 12px 24px #07090e, -12px -12px 24px #1d2332;
    --shadow-inset: inset 5px 5px 10px #090c12, inset -5px -5px 10px #1b202e;
    --shadow-pressed: inset 4px 4px 8px #06080c, inset -4px -4px 8px #1d2332;
    
    --text-emboss: 0 2px 4px rgba(0, 0, 0, 0.8);
    --accent-cyan: #38bdf8;
    --accent-glow: 0 0 18px rgba(56, 189, 248, 0.45);
    --brand-mark-bg: #121620;
    --card-bg: #121620;
    
    /* Dark Panel Colors */
    --panel-dark-bg: #0b0e14;
    --panel-dark-shadow: inset 6px 6px 14px #040508, inset -6px -6px 14px #121720;
}