/* Font Face Definitions */
@font-face {
  font-family: 'Inika';
  src: url('../../assets/fonts/Inika/Inika-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inika';
  src: url('../../assets/fonts/Inika/Inika-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Libre Franklin';
  src: url('../../assets/fonts/Libre_Franklin/static/LibreFranklin-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Libre Franklin';
  src: url('../../assets/fonts/Libre_Franklin/static/LibreFranklin-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Libre Franklin';
  src: url('../../assets/fonts/Libre_Franklin/static/LibreFranklin-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Libre Franklin';
  src: url('../../assets/fonts/Libre_Franklin/static/LibreFranklin-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@layer ks-tokens, ks-base, ks-objects, ks-primitives;

@layer ks-tokens {
  :root {
    --ks-font-heading: "Inika", serif;
    --ks-font-body: "Libre Franklin", sans-serif;
    --ks-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --ks-font-weight-body: 300;
    --ks-font-weight-medium: 500;
    --ks-font-weight-strong: 600;
    --ks-font-size-xs: 0.75rem;
    --ks-font-size-sm: 0.875rem;
    --ks-font-size-base: 1rem;
    --ks-font-size-lg: 1.125rem;
    --ks-font-size-xl: 1.25rem;
    --ks-font-size-2xl: 1.5rem;
    --ks-font-size-3xl: 1.875rem;
    --ks-font-size-4xl: 2.25rem;
    --ks-font-size-5xl: 3rem;
    --ks-font-size-6xl: 3.75rem;

    /* Breakpoint Scale (5 tiers) - for documentation only, CSS can't use var() in @media
       sm:  640px   - larger phones
       md:  768px   - tablets
       lg:  1024px  - desktop (primary switch point)
       xl:  1200px  - wide screens
       xxl: 1536px  - ultra-wide monitors
    */

    --ks-color-primary-50: #f1fcf9;
    --ks-color-primary-100: #cef9eb;
    --ks-color-primary-200: #9df2d8;
    --ks-color-primary-300: #65e3c2;
    --ks-color-primary-400: #35cca9;
    --ks-color-primary-500: #1cb090;
    --ks-color-primary-600: #16a085;
    --ks-color-primary-700: #147160;
    --ks-color-primary-800: #155a4f;
    --ks-color-primary-900: #164b42;

    --ks-color-secondary-50: #c6e2c7;
    --ks-color-secondary-100: #b3d9b5;
    --ks-color-secondary-200: #a0cfa3;
    --ks-color-secondary-300: #8dc591;
    --ks-color-secondary-400: #7abc7f;
    --ks-color-secondary-500: #65b26d;
    --ks-color-secondary-600: #4fa85a;
    --ks-color-secondary-700: #369e47;
    --ks-color-secondary-800: #2e893d;
    --ks-color-secondary-900: #257432;

    --ks-color-tertiary-50: #fefdf9;
    --ks-color-tertiary-100: #fdf8ed;
    --ks-color-tertiary-200: #f9f0d6;
    --ks-color-tertiary-300: #f2e3b8;
    --ks-color-tertiary-400: #e6cc7a;
    --ks-color-tertiary-500: #d4a843;
    --ks-color-tertiary-600: #b8943a;
    --ks-color-tertiary-700: #9d7b31;
    --ks-color-tertiary-800: #83642a;
    --ks-color-tertiary-900: #6a5022;

    --ks-color-gray-50: #f9fafb;
    --ks-color-gray-100: #f3f4f6;
    --ks-color-gray-200: #e5e7eb;
    --ks-color-gray-300: #d1d5db;
    --ks-color-gray-400: #9ca3af;
    --ks-color-gray-500: #6b7280;
    --ks-color-gray-600: #4b5563;
    --ks-color-gray-700: #374151;
    --ks-color-gray-800: #1f2937;
    --ks-color-gray-900: #111827;
    --ks-color-gray-950: #030712;

    --ks-color-info-50: #eff6ff;
    --ks-color-info-100: #dbeafe;
    --ks-color-info-200: #bfdbfe;
    --ks-color-info-400: #60a5fa;
    --ks-color-info-500: #3b82f6;
    --ks-color-info-600: #2563eb;
    --ks-color-info-700: #1d4ed8;
    --ks-color-info-800: #1e40af;
    --ks-color-info-900: #1e3a8a;

    --ks-color-warning-50: #fff7ed;
    --ks-color-warning-100: #fef3c7;
    --ks-color-warning-200: #fed7aa;
    --ks-color-warning-300: #fdba74;
    --ks-color-warning-400: #fb923c;
    --ks-color-warning-500: #f97316;
    --ks-color-warning-600: #ea580c;
    --ks-color-warning-700: #c2410c;
    --ks-color-warning-800: #9a3412;
    --ks-color-warning-900: #7c2d12;

    --ks-color-danger-50: #fef2f2;
    --ks-color-danger-100: #fee2e2;
    --ks-color-danger-200: #fecaca;
    --ks-color-danger-300: #fca5a5;
    --ks-color-danger-400: #f87171;
    --ks-color-danger-500: #ef4444;
    --ks-color-danger-600: #dc2626;
    --ks-color-danger-700: #b91c1c;
    --ks-color-danger-800: #991b1b;

    --ks-color-success-50: #f0fdf4;
    --ks-color-success-100: #dcfce7;
    --ks-color-success-200: #bbf7d0;
    --ks-color-success-400: #4ade80;
    --ks-color-success-500: #22c55e;
    --ks-color-success-600: #16a34a;
    --ks-color-success-700: #15803d;
    --ks-color-success-800: #166534;
    --ks-color-success-900: #14532d;

    --ks-color-accent-50: #faf5ff;
    --ks-color-accent-100: #f3e8ff;
    --ks-color-accent-400: #c084fc;
    --ks-color-accent-500: #a855f7;
    --ks-color-accent-600: #9333ea;
    --ks-color-accent-700: #7e22ce;

    --ks-color-white: #ffffff;
    --ks-color-black: #000000;

    --ks-color-surface-page: #ffffff;
    --ks-color-surface-section: #f9f9f9;
    --ks-color-surface-card: #fefdf9;
    --ks-color-surface-strong: #252525;
    --ks-color-surface-black: #000000;
    --ks-color-surface-hover: #f3f4f6;
    --ks-color-overlay-faint: rgb(0 0 0 / 0.1);
    --ks-color-overlay-light: rgb(0 0 0 / 0.3);
    --ks-color-overlay-subtle: rgb(0 0 0 / 0.5);
    --ks-color-overlay-dark: rgb(0 0 0 / 0.6);
    --ks-color-overlay-medium: rgb(0 0 0 / 0.7);
    --ks-color-overlay-heavy: rgb(0 0 0 / 0.8);
    --ks-color-overlay-strong: rgb(0 0 0 / 0.9);
    --ks-color-overlay-inverse-faint: rgb(255 255 255 / 0.1);
    --ks-color-overlay-inverse: rgb(255 255 255 / 0.2);
    --ks-color-overlay-inverse-light: rgb(255 255 255 / 0.3);
    --ks-color-overlay-inverse-medium: rgb(255 255 255 / 0.6);
    --ks-color-overlay-inverse-strong: rgb(255 255 255 / 0.9);
    --ks-color-text-strong: #111111;
    --ks-color-text-default: #252525;
    --ks-color-text-muted: #666666;
    --ks-color-text-inverse: #ffffff;
    --ks-color-border-subtle: #dcdcdc;
    --ks-color-border-default: #bdbdbd;
    --ks-color-border-strong: #9d9d9d;

    --ks-space-1: 0.25rem;
    --ks-space-2: 0.5rem;
    --ks-space-3: 0.75rem;
    --ks-space-4: 1rem;
    --ks-space-5: 1.25rem;
    --ks-space-6: 1.5rem;
    --ks-space-8: 2rem;
    --ks-space-10: 2.5rem;
    --ks-space-12: 3rem;
    --ks-space-16: 4rem;
    --ks-space-20: 5rem;
    --ks-space-24: 6rem;

    --ks-radius-sm: 0.25rem;
    --ks-radius-md: 0.5rem;
    --ks-radius-lg: 0.75rem;
    --ks-radius-xl: 1.5rem;
    --ks-radius-full: 9999px;

    --ks-border-width: 1px;
    --ks-border-width-strong: 2px;

    --ks-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --ks-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --ks-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --ks-shadow-xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);

    --ks-duration-fast: 150ms;
    --ks-duration-base: 150ms;
    --ks-duration-slow: 300ms;
    --ks-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
    --ks-ease-emphasis: cubic-bezier(0.4, 0, 0.2, 1);

    --ks-container-max: 96rem;
    --ks-container-padding: 1rem;
  }

  /* Dark theme token values; .dark is set on <html>. */
  .dark {
    --ks-color-surface-page: #111111;
    --ks-color-surface-section: #1c1c1c;
    --ks-color-surface-card: #252525;
    --ks-color-surface-strong: #383838;
    --ks-color-surface-hover: #374151;
    --ks-color-text-strong: #f9f9f9;
    --ks-color-text-default: #f0f0f0;
    --ks-color-text-muted: #c2c2c2;
    --ks-color-border-subtle: #383838;
    --ks-color-border-default: #666666;
    --ks-color-border-strong: #949494;
  }
}