/* variables.css */

/* Inter, served from /fonts (SIL Open Font License, fonts/OFL.txt) instead of Google Fonts,
   which cost two extra connections and a render-blocking stylesheet. Each file is the
   variable font for one subset, so it covers every weight. Pages preload the latin file. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-v20-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-v20-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Arial scaled to Inter's width and line metrics, used until Inter arrives, so the swap
   does not reflow the text (it moved the cookie banner by 0.11 CLS on a phone). Inter's
   ascender and descender are 1984 and 494 of 2048 units; each override is that divided by
   the size-adjust. Bold text gets Arial Bold, which is much closer to Inter Bold. */
@font-face {
  font-family: 'Inter Fallback';
  font-weight: 100 500;
  src: local('Arial');
  ascent-override: 90.2%;
  descent-override: 22.46%;
  line-gap-override: 0%;
  size-adjust: 107.4%;
}
@font-face {
  font-family: 'Inter Fallback';
  font-weight: 600 900;
  src: local('Arial Bold'), local('Arial-BoldMT');
  ascent-override: 95.16%;
  descent-override: 23.69%;
  line-gap-override: 0%;
  size-adjust: 101.8%;
}

:root {
  /* Aliases: about, contact and 404 use these older names. Without them their buttons
     had no background and rendered white on white. They follow the tokens below, so
     the dark theme applies to them too. */
  --primary-color: var(--color-primary);
  --primary-light: var(--color-primary-light);
  --bg-light: var(--color-surface);
  --border-color: var(--color-border);
  --text-color: var(--color-text);
  --text-color-light: var(--color-secondary);

  /* Colors */
  --color-primary: #E52B2F;
  --color-primary-dark: #C91F24;
  --color-primary-light: #FEE2E2;

  --color-bg: #F7F9FC;
  --color-card: #FFFFFF;
  --color-surface: #F1F5F9;

  --color-text: #111827;
  --color-secondary: #64748B;
  --color-muted: #94A3B8;
  --color-border: #E5E7EB;

  --color-success: #16A34A;
  --color-warning: #F59E0B;
  --color-error: #DC2626;
  --color-info: #3B82F6;

  /* Categories */
  --color-cat-convert: #3B82F6;
  --color-cat-edit: #8B5CF6;
  --color-cat-organize: #F59E0B;
  --color-cat-security: #16A34A;
  --color-cat-more: #EC4899;

  /* Spacing Scale (4px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* Border Radius */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

  /* Typography */
  --font-sans: 'Inter', 'Inter Fallback', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --text-xs: 13px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 32px;
  --text-4xl: 40px;
  --text-5xl: 48px;

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.2s ease;
  --transition-slow: 0.3s ease;

  /* Z-Index */
  --z-dropdown: 100;
  --z-sticky: 500;
  --z-header: 1000;
  --z-modal: 2000;
  --z-tooltip: 3000;
}

[data-theme='dark'] {
  --color-bg: #0F172A;
  --color-card: #1E293B;
  --color-surface: #334155;
  
  --color-text: #F8FAFC;
  --color-secondary: #CBD5E1;
  --color-muted: #94A3B8;
  --color-border: #334155;
  
  --color-primary-light: #451a1a;
}