@font-face {
    font-family: 'Figtree';
    src: url('../../public/fonts/figtree-variable.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
  }
  
  @font-face {
    font-family: 'Figtree';
    src: url('../../public/fonts/figtree-italic-variable.ttf') format('truetype');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
  }

  @font-face {
    font-family: 'Code';
    src: url('../../public/fonts/google-sans-code.ttf') format('truetype');
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
  }
  
  :root {
    /* Typography */
    --font-family: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-md: 1rem;
    --font-size-ml: 1.075rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.5rem;
    --font-size-2xl: 2rem;
    --font-size-3xl: 2.5rem;
    --font-size-4xl: 3.5rem;
    --font-size-hero: 2.5rem;

    /* Letter Spacing */
    --letter-spacing-none: 0.0em;
    --letter-spacing-base: 0.025em;
    --letter-spacing-wide: 0.05em;

    /* Spacing */
    --spacing-xxs: 0.25rem;
    --spacing-xs: 0.5rem;
    --spacing-s: 0.75rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;
    --spacing-2xl: 4rem;
    --spacing-3xl: 5rem;

    
    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-ml: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-xxl: 32px;

    /* Padding */
    --padding-xxs: 0.25rem;
    --padding-xs: 0.5rem;
    --padding-sm: 1rem;
    --padding-md: 1.5rem;
    --padding-lg: 2rem;
    --padding-xl: 3rem;
    --padding-2xl: 4rem;
  }
  
  /* Dark Theme (Default) */
  :root,
  :root[data-theme="dark"] {
    /* Base Colors */
    --color-bg: #0f0f0f;
    --color-bg-offset: #1d1d1d;
    --color-text: #fafafa;
    --color-button-neutral: #f5f5f5;
    --color-button-neutral-text: #1a1a1a;
    --color-button-accent-text: #1a1a1a;
    --color-accent: #48b3af;

    --color-shading-base: color-mix(in srgb, var(--color-accent) 8%, transparent);
    --color-shading-soft: color-mix(in srgb, var(--color-accent) 4%, transparent);
    --color-shading-strong: color-mix(in srgb, var(--color-accent) 15%, transparent);
    --color-shading-foreground: color-mix(in srgb, var(--color-accent) 4%, transparent);
    --color-active-text: color-mix(in srgb, var(--color-accent) 25%, var(--color-text));
    --color-active-icon: color-mix(in srgb, var(--color-accent) 50%, var(--color-text));
    --color-text-75: color-mix(in srgb, var(--color-text) 75%, transparent);
    --color-text-60: color-mix(in srgb, var(--color-text) 60%, transparent);
    --color-text-50: color-mix(in srgb, var(--color-text) 50%, transparent);
    --color-text-35: color-mix(in srgb, var(--color-text) 35%, transparent);
    --color-text-25: color-mix(in srgb, var(--color-text) 25%, transparent);
    --color-accent-border: color-mix(in srgb, var(--color-accent) 35%, transparent);
  }
  
  /* Light Theme */
  :root[data-theme="light"] {
    /* Base Colors */
    --color-bg: #fafafa;
    --color-bg-offset: #ffffff;
    --color-text: #1a1a1a;
    --color-button-neutral: #1a1a1a;
    --color-button-neutral-text: #fafafa;
    --color-button-accent-text: #1a1a1a;
    --color-accent: #25b6ac;

    --color-shading-base: color-mix(in srgb, var(--color-accent) 15%, transparent);
    --color-shading-soft: color-mix(in srgb, var(--color-accent) 6%, transparent);
    --color-shading-strong: color-mix(in srgb, var(--color-accent) 25%, transparent);
    --color-shading-foreground: color-mix(in srgb, white 80%, transparent);
    --color-active-text: color-mix(in srgb, var(--color-accent) 25%, var(--color-text));
    --color-active-icon: color-mix(in srgb, var(--color-accent) 50%, var(--color-text));
    --color-text-75: color-mix(in srgb, var(--color-text) 75%, transparent);
    --color-text-60: color-mix(in srgb, var(--color-text) 60%, transparent);
    --color-text-50: color-mix(in srgb, var(--color-text) 50%, transparent);
    --color-text-35: color-mix(in srgb, var(--color-text) 35%, transparent);
    --color-text-25: color-mix(in srgb, var(--color-text) 25%, transparent);
    --color-accent-border: color-mix(in srgb, var(--color-accent) 35%, transparent);
  }
  
  /* Reset & Base Styles */
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-family);
  background-color: var(--color-bg);
  color: var(--color-text);
  width: 100%;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  letter-spacing: var(--letter-spacing-base);
}