/* ============================================================
   VidQuarry — Base Design System (Microsoft Fluent 2)
   ============================================================ */
/* No external fonts needed — using local system fonts for authentic Microsoft look */

:root {
  --ms-red:#F25022;--ms-green:#7FBA00;--ms-blue:#00A4EF;--ms-yellow:#FFB900;
  --primary:#0078D4;--primary-hover:#005A9E;--primary-active:#004578;--primary-light:#DEECF9;
  --surface-primary:#FFFFFF;--surface-secondary:#F5F5F5;--surface-tertiary:#FAFAFA;
  --text-primary:#1A1A1A;--text-secondary:#616161;--text-tertiary:#8A8A8A;
  --text-on-primary:#FFFFFF;--text-accent:#0078D4;--text-danger:#D13438;--text-success:#107C10;
  --border-default:#E0E0E0;--border-strong:#D1D1D1;--border-subtle:#F0F0F0;
  --mica-bg:rgba(255,255,255,0.85);--acrylic-bg:rgba(255,255,255,0.72);
  --acrylic-border:rgba(255,255,255,0.5);--smoke-bg:rgba(0,0,0,0.32);--acrylic-blur:30px;
  --space-xs:4px;--space-s:8px;--space-m:16px;--space-l:24px;--space-xl:32px;
  --space-2xl:48px;--space-3xl:64px;--space-4xl:96px;
  --radius-s:2px;--radius-m:4px;--radius-l:8px;--radius-xl:12px;--radius-2xl:16px;--radius-full:9999px;
  --shadow-4:0 2px 4px rgba(0,0,0,0.04),0 1px 2px rgba(0,0,0,0.06);
  --shadow-8:0 4px 8px rgba(0,0,0,0.04),0 1px 4px rgba(0,0,0,0.06);
  --shadow-16:0 8px 16px rgba(0,0,0,0.06),0 2px 4px rgba(0,0,0,0.04);
  --shadow-28:0 14px 28px rgba(0,0,0,0.08),0 4px 8px rgba(0,0,0,0.06);
  --shadow-64:0 32px 64px rgba(0,0,0,0.12),0 8px 16px rgba(0,0,0,0.06);
  --ease-fluent:cubic-bezier(0.1,0.9,0.2,1);--duration-fast:150ms;--duration-normal:250ms;--duration-slow:400ms;
  --font-display:68px;--font-h1:46px;--font-h2:32px;--font-h3:24px;--font-h4:20px;
  --font-body-lg:18px;--font-body:15px;--font-body-sm:14px;--font-caption:12px;
  --lh-display:1.15;--lh-heading:1.3;--lh-body:1.65;--lh-caption:1.4;
  --font-en:'Segoe UI Variable','Segoe UI','Segoe UI Web (West European)',-apple-system,BlinkMacSystemFont,Roboto,'Helvetica Neue',sans-serif;
  --font-ar:'Segoe UI Variable','Segoe UI Arabic','Segoe UI','Segoe UI Web (Arabic)',-apple-system,BlinkMacSystemFont,Roboto,'Helvetica Neue',sans-serif;
  --font-family:var(--font-en);
  --z-dropdown:100;--z-sticky:200;--z-overlay:300;--z-modal:400;
  --container-xl:1280px;--navbar-height:52px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
body{font-family:var(--font-family);font-size:var(--font-body);line-height:var(--lh-body);color:var(--text-primary);background:var(--surface-primary);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;min-height:100vh}
img,video,svg{display:block;max-width:100%;height:auto}
a{color:var(--text-accent);text-decoration:none;transition:color var(--duration-fast) var(--ease-fluent)}
a:hover{color:var(--primary-hover)}
button{font-family:inherit;cursor:pointer;border:none;background:none}
ul,ol{list-style:none}
h1,h2,h3,h4,h5,h6{line-height:var(--lh-heading);font-weight:600}
::selection{background:var(--primary);color:var(--text-on-primary)}

/* RTL/LTR */
[dir="rtl"]{--font-family:var(--font-ar);direction:rtl;text-align:right}
[dir="rtl"] body,[dir="rtl"] button,[dir="rtl"] input{font-family:var(--font-ar)}
[dir="ltr"]{--font-family:var(--font-en);direction:ltr;text-align:left}

/* Materials */
.material-mica{background-color:var(--mica-bg)}
.material-acrylic{background:var(--acrylic-bg);backdrop-filter:blur(var(--acrylic-blur));-webkit-backdrop-filter:blur(var(--acrylic-blur));border:1px solid var(--acrylic-border)}

/* Utility */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.text-center{text-align:center!important}
.text-gradient{background:linear-gradient(135deg,var(--primary),var(--ms-blue));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}