@lucasmiqueias/blip-tokens/css/index.css

Design token system inspired by BLiP's design language

/* BLiP Design System - Main Entry Point */

/* Import all tokens */

/* BLiP Design System - Core Tokens */

/* This file contains all the base design tokens */

:root {
  /* Brand Colors */
  --color-brand: rgba(0, 150, 250, 1);

  /* Primary Colors - Light Theme */
  --color-light-primary: rgba(30, 107, 241, 1);
  --color-light-secondary: rgba(41, 41, 41, 1);

  /* Primary Colors - Dark Theme */
  --color-dark-primary: rgba(73, 139, 255, 1);
  --color-dark-secondary: rgba(255, 255, 255, 1);

  /* Surface Colors - Light Theme */
  --color-light-surface-0: rgba(255, 255, 255, 1);
  --color-light-surface-1: rgba(246, 246, 246, 1);
  --color-light-surface-2: rgba(237, 237, 237, 1);
  --color-light-surface-3: rgba(227, 227, 227, 1);
  --color-light-surface-4: rgba(20, 20, 20, 1);
  --color-light-surface-positive: rgba(1, 114, 62, 1);
  --color-light-surface-negative: rgba(138, 0, 0, 1);
  --color-light-surface-primary: rgba(30, 107, 241, 1);

  /* Surface Colors - Dark Theme */
  --color-dark-surface-0: rgba(66, 66, 66, 1);
  --color-dark-surface-1: rgba(57, 57, 57, 1);
  --color-dark-surface-2: rgba(31, 31, 31, 1);
  --color-dark-surface-3: rgba(20, 20, 20, 1);
  --color-dark-surface-4: rgba(10, 10, 10, 1);
  --color-dark-surface-positive: rgba(1, 86, 47, 1);
  --color-dark-surface-negative: rgba(87, 0, 0, 1);
  --color-dark-surface-primary: rgba(12, 80, 197, 1);

  /* Content Colors - Light Theme */
  --color-light-content-default: rgba(40, 40, 40, 1);
  --color-light-content-disable: rgba(89, 89, 89, 1);
  --color-light-content-ghost: rgba(140, 140, 140, 1);
  --color-light-content-bright: rgba(255, 255, 255, 1);
  --color-light-content-din: rgba(0, 0, 0, 1);

  /* Content Colors - Dark Theme */
  --color-dark-content-default: rgba(255, 255, 255, 1);
  --color-dark-content-disable: rgba(148, 148, 148, 1);
  --color-dark-content-ghost: rgba(102, 102, 102, 1);
  --color-dark-content-bright: rgba(255, 255, 255, 1);
  --color-dark-content-din: rgba(0, 0, 0, 1);

  /* Border Colors - Light Theme */
  --color-light-border-1: rgba(0, 0, 0, 0.2);
  --color-light-border-2: rgba(0, 0, 0, 0.16);
  --color-light-border-3: rgba(0, 0, 0, 0.06);

  /* Border Colors - Dark Theme */
  --color-dark-border-1: rgba(255, 255, 255, 0.2);
  --color-dark-border-2: rgba(255, 255, 255, 0.16);
  --color-dark-border-3: rgba(255, 255, 255, 0.06);

  /* Semantic Colors - Light Theme */
  --color-light-positive: rgba(0, 122, 66, 1);
  --color-light-negative: rgba(168, 11, 11, 1);
  --color-light-info: rgba(128, 227, 235, 1);
  --color-light-system: rgba(178, 223, 253, 1);
  --color-light-focus: rgba(194, 38, 251, 1);
  --color-light-success: rgba(132, 235, 188, 1);
  --color-light-warning: rgba(253, 233, 155, 1);
  --color-light-error: rgba(250, 190, 190, 1);
  --color-light-delete: rgba(230, 15, 15, 1);

  /* Semantic Colors - Dark Theme */
  --color-dark-positive: rgba(107, 255, 188, 1);
  --color-dark-negative: rgba(255, 184, 184, 1);
  --color-dark-info: rgba(0, 79, 86, 1);
  --color-dark-system: rgba(0, 60, 100, 1);
  --color-dark-focus: rgba(194, 38, 251, 1);
  --color-dark-success: rgba(53, 94, 75, 1);
  --color-dark-warning: rgba(96, 89, 59, 1);
  --color-dark-error: rgba(123, 61, 61, 1);
  --color-dark-delete: rgba(182, 12, 12, 1);

  /* Extended Colors - Light Theme */
  --color-light-extended-blue: rgba(25, 104, 240, 1);
  --color-light-extended-blue-bright: rgba(178, 223, 253, 1);
  --color-light-extended-ocean: rgba(0, 211, 228, 1);
  --color-light-extended-ocean-bright: rgba(128, 227, 235, 1);
  --color-light-extended-green: rgba(53, 222, 144, 1);
  --color-light-extended-green-bright: rgba(132, 235, 188, 1);
  --color-light-extended-yellow: rgba(251, 207, 35, 1);
  --color-light-extended-yellow-bright: rgba(253, 233, 155, 1);
  --color-light-extended-orange: rgba(240, 99, 5, 1);
  --color-light-extended-orange-bright: rgba(252, 170, 115, 1);
  --color-light-extended-red: rgba(230, 15, 15, 1);
  --color-light-extended-red-bright: rgba(249, 159, 159, 1);
  --color-light-extended-pink: rgba(251, 75, 193, 1);
  --color-light-extended-pink-bright: rgba(253, 155, 220, 1);
  --color-light-extended-gray: rgba(102, 102, 102, 1);
  --color-light-extended-gray-bright: rgba(199, 199, 199, 1);

  /* Extended Colors - Dark Theme */
  --color-dark-extended-blue: rgba(25, 104, 240, 1);
  --color-dark-extended-blue-bright: rgba(178, 223, 253, 1);
  --color-dark-extended-ocean: rgba(0, 211, 228, 1);
  --color-dark-extended-ocean-bright: rgba(128, 227, 235, 1);
  --color-dark-extended-green: rgba(53, 222, 144, 1);
  --color-dark-extended-green-bright: rgba(132, 235, 188, 1);
  --color-dark-extended-yellow: rgba(251, 207, 35, 1);
  --color-dark-extended-yellow-bright: rgba(253, 233, 155, 1);
  --color-dark-extended-orange: rgba(240, 99, 5, 1);
  --color-dark-extended-orange-bright: rgba(252, 170, 115, 1);
  --color-dark-extended-red: rgba(230, 15, 15, 1);
  --color-dark-extended-red-bright: rgba(249, 159, 159, 1);
  --color-dark-extended-pink: rgba(251, 75, 193, 1);
  --color-dark-extended-pink-bright: rgba(253, 155, 220, 1);
  --color-dark-extended-gray: rgba(102, 102, 102, 1);
  --color-dark-extended-gray-bright: rgba(199, 199, 199, 1);

  /* Action Colors - Light Theme */
  --color-light-hover: rgba(0, 0, 0, 0.08);
  --color-light-pressed: rgba(0, 0, 0, 0.16);

  /* Action Colors - Dark Theme */
  --color-dark-hover: rgba(255, 255, 255, 0.16);
  --color-dark-pressed: rgba(255, 255, 255, 0.08);

  /* Size Tokens */
  --size-0: 0px;
  --size-0-5: 4px;
  --size-1: 8px;
  --size-2: 16px;
  --size-3: 24px;
  --size-4: 32px;
  --size-5: 40px;
  --size-6: 48px;
  --size-7: 56px;
  --size-8: 64px;
  --size-9: 72px;
  --size-10: 80px;
  --size-11: 88px;
  --size-12: 96px;

  /* Border Radius Tokens */
  --radius-none: 0px;
  --radius-sm: 2px;
  --radius-base: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-3xl: 24px;
  --radius-full: 9999px;

  /* Spacing Tokens */
  --spacing-0: var(--size-0);
  --spacing-px: 1px;
  --spacing-0-5: var(--size-0-5);
  --spacing-1: var(--size-1);
  --spacing-1-5: 6px;
  --spacing-2: var(--size-2);
  --spacing-2-5: 10px;
  --spacing-3: var(--size-3);
  --spacing-3-5: 14px;
  --spacing-4: var(--size-4);
  --spacing-5: var(--size-5);
  --spacing-6: var(--size-6);
  --spacing-7: var(--size-7);
  --spacing-8: var(--size-8);
  --spacing-9: var(--size-9);
  --spacing-10: var(--size-10);
  --spacing-11: var(--size-11);
  --spacing-12: var(--size-12);

  /* Font Size Tokens */
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-base: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 30px;
  --font-size-4xl: 36px;
  --font-size-5xl: 48px;
  --font-size-6xl: 60px;
  --font-size-7xl: 72px;
  --font-size-8xl: 96px;
  --font-size-9xl: 128px;

  /* Font Family Tokens */
  --font-family-sans: "Nunito Sans", -apple-system, BlinkMacSystemFont,
    "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans",
    "Droid Sans", "Helvetica Neue", sans-serif;
  --font-family-serif: "Georgia", "Cambria", "Times New Roman", "Times", serif;
  --font-family-mono: "Menlo", "Monaco", "Consolas", "Liberation Mono",
    "Courier New", monospace;

  /* Font Weight Tokens */
  --font-weight-thin: 100;
  --font-weight-extralight: 200;
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-weight-black: 900;

  /* Shadow Tokens */
  --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);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
  --shadow-none: none;

  /* Icon Size Tokens */
  --icon-xs: 12px;
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;
  --icon-xl: 32px;
  --icon-2xl: 40px;

  /* Z-Index Tokens */
  --z-index-auto: auto;
  --z-index-0: 0;
  --z-index-10: 10;
  --z-index-20: 20;
  --z-index-30: 30;
  --z-index-40: 40;
  --z-index-50: 50;
  --z-index-dropdown: 1000;
  --z-index-sticky: 1020;
  --z-index-fixed: 1030;
  --z-index-modal-backdrop: 1040;
  --z-index-modal: 1050;
  --z-index-popover: 1060;
  --z-index-tooltip: 1070;
  --z-index-toast: 1080;
}

/* Import theme configurations */

/* Light Theme - Default Theme */

:root,
:root[data-theme="light"],
.theme-light {
  /* Primary Theme Tokens */
  --color-primary: var(--color-light-primary);
  --color-secondary: var(--color-light-secondary);

  /* Surface Tokens */
  --surface-0: var(--color-light-surface-0);
  --surface-1: var(--color-light-surface-1);
  --surface-2: var(--color-light-surface-2);
  --surface-3: var(--color-light-surface-3);
  --surface-4: var(--color-light-surface-4);
  --surface-positive: var(--color-light-surface-positive);
  --surface-negative: var(--color-light-surface-negative);
  --surface-primary: var(--color-light-surface-primary);

  /* Content Tokens */
  --content-default: var(--color-light-content-default);
  --content-disable: var(--color-light-content-disable);
  --content-ghost: var(--color-light-content-ghost);
  --content-bright: var(--color-light-content-bright);
  --content-din: var(--color-light-content-din);
  --content-muted: var(--color-light-content-ghost);

  /* Border Tokens */
  --border-1: var(--color-light-border-1);
  --border-2: var(--color-light-border-2);
  --border-3: var(--color-light-border-3);

  /* Semantic Status Tokens */
  --color-positive: var(--color-light-positive);
  --color-negative: var(--color-light-negative);
  --color-info: var(--color-light-info);
  --color-system: var(--color-light-system);
  --color-focus: var(--color-light-focus);
  --color-success: var(--color-light-success);
  --color-warning: var(--color-light-warning);
  --color-error: var(--color-light-error);
  --color-delete: var(--color-light-delete);

  /* Extended Color Tokens */
  --color-blue: var(--color-light-extended-blue);
  --color-blue-bright: var(--color-light-extended-blue-bright);
  --color-ocean: var(--color-light-extended-ocean);
  --color-ocean-bright: var(--color-light-extended-ocean-bright);
  --color-green: var(--color-light-extended-green);
  --color-green-bright: var(--color-light-extended-green-bright);
  --color-yellow: var(--color-light-extended-yellow);
  --color-yellow-bright: var(--color-light-extended-yellow-bright);
  --color-orange: var(--color-light-extended-orange);
  --color-orange-bright: var(--color-light-extended-orange-bright);
  --color-red: var(--color-light-extended-red);
  --color-red-bright: var(--color-light-extended-red-bright);
  --color-pink: var(--color-light-extended-pink);
  --color-pink-bright: var(--color-light-extended-pink-bright);
  --color-gray: var(--color-light-extended-gray);
  --color-gray-bright: var(--color-light-extended-gray-bright);

  /* Action Tokens */
  --action-hover: var(--color-light-hover);
  --action-pressed: var(--color-light-pressed);
}

/* Dark Theme */

:root[data-theme="dark"],
.theme-dark {
  /* Primary Theme Tokens */
  --color-primary: var(--color-dark-primary);
  --color-secondary: var(--color-dark-secondary);

  /* Surface Tokens */
  --surface-0: var(--color-dark-surface-0);
  --surface-1: var(--color-dark-surface-1);
  --surface-2: var(--color-dark-surface-2);
  --surface-3: var(--color-dark-surface-3);
  --surface-4: var(--color-dark-surface-4);
  --surface-positive: var(--color-dark-surface-positive);
  --surface-negative: var(--color-dark-surface-negative);
  --surface-primary: var(--color-dark-surface-primary);

  /* Content Tokens */
  --content-default: var(--color-dark-content-default);
  --content-disable: var(--color-dark-content-disable);
  --content-ghost: var(--color-dark-content-ghost);
  --content-bright: var(--color-dark-content-bright);
  --content-din: var(--color-dark-content-din);
  --content-muted: var(--color-dark-content-ghost);

  /* Border Tokens */
  --border-1: var(--color-dark-border-1);
  --border-2: var(--color-dark-border-2);
  --border-3: var(--color-dark-border-3);

  /* Semantic Status Tokens */
  --color-positive: var(--color-dark-positive);
  --color-negative: var(--color-dark-negative);
  --color-info: var(--color-dark-info);
  --color-system: var(--color-dark-system);
  --color-focus: var(--color-dark-focus);
  --color-success: var(--color-dark-success);
  --color-warning: var(--color-dark-warning);
  --color-error: var(--color-dark-error);
  --color-delete: var(--color-dark-delete);

  /* Extended Color Tokens */
  --color-blue: var(--color-dark-extended-blue);
  --color-blue-bright: var(--color-dark-extended-blue-bright);
  --color-ocean: var(--color-dark-extended-ocean);
  --color-ocean-bright: var(--color-dark-extended-ocean-bright);
  --color-green: var(--color-dark-extended-green);
  --color-green-bright: var(--color-dark-extended-green-bright);
  --color-yellow: var(--color-dark-extended-yellow);
  --color-yellow-bright: var(--color-dark-extended-yellow-bright);
  --color-orange: var(--color-dark-extended-orange);
  --color-orange-bright: var(--color-dark-extended-orange-bright);
  --color-red: var(--color-dark-extended-red);
  --color-red-bright: var(--color-dark-extended-red-bright);
  --color-pink: var(--color-dark-extended-pink);
  --color-pink-bright: var(--color-dark-extended-pink-bright);
  --color-gray: var(--color-dark-extended-gray);
  --color-gray-bright: var(--color-dark-extended-gray-bright);

  /* Action Tokens */
  --action-hover: var(--color-dark-hover);
  --action-pressed: var(--color-dark-pressed);
}

/* Auto Theme Support - System Preference */

/* Auto theme support - use system preference when data-theme="auto" */

@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    /* Apply dark theme tokens when system prefers dark mode */
    --color-primary: var(--color-dark-primary);
    --color-secondary: var(--color-dark-secondary);

    /* Surface Tokens */
    --surface-0: var(--color-dark-surface-0);
    --surface-1: var(--color-dark-surface-1);
    --surface-2: var(--color-dark-surface-2);
    --surface-3: var(--color-dark-surface-3);
    --surface-4: var(--color-dark-surface-4);
    --surface-positive: var(--color-dark-surface-positive);
    --surface-negative: var(--color-dark-surface-negative);
    --surface-primary: var(--color-dark-surface-primary);

    /* Content Tokens */
    --content-default: var(--color-dark-content-default);
    --content-disable: var(--color-dark-content-disable);
    --content-ghost: var(--color-dark-content-ghost);
    --content-bright: var(--color-dark-content-bright);
    --content-din: var(--color-dark-content-din);
    --content-muted: var(--color-dark-content-ghost);

    /* Border Tokens */
    --border-1: var(--color-dark-border-1);
    --border-2: var(--color-dark-border-2);
    --border-3: var(--color-dark-border-3);

    /* Semantic Status Tokens */
    --color-positive: var(--color-dark-positive);
    --color-negative: var(--color-dark-negative);
    --color-info: var(--color-dark-info);
    --color-system: var(--color-dark-system);
    --color-focus: var(--color-dark-focus);
    --color-success: var(--color-dark-success);
    --color-warning: var(--color-dark-warning);
    --color-error: var(--color-dark-error);
    --color-delete: var(--color-dark-delete);

    /* Extended Color Tokens */
    --color-blue: var(--color-dark-extended-blue);
    --color-blue-bright: var(--color-dark-extended-blue-bright);
    --color-ocean: var(--color-dark-extended-ocean);
    --color-ocean-bright: var(--color-dark-extended-ocean-bright);
    --color-green: var(--color-dark-extended-green);
    --color-green-bright: var(--color-dark-extended-green-bright);
    --color-yellow: var(--color-dark-extended-yellow);
    --color-yellow-bright: var(--color-dark-extended-yellow-bright);
    --color-orange: var(--color-dark-extended-orange);
    --color-orange-bright: var(--color-dark-extended-orange-bright);
    --color-red: var(--color-dark-extended-red);
    --color-red-bright: var(--color-dark-extended-red-bright);
    --color-pink: var(--color-dark-extended-pink);
    --color-pink-bright: var(--color-dark-extended-pink-bright);
    --color-gray: var(--color-dark-extended-gray);
    --color-gray-bright: var(--color-dark-extended-gray-bright);

    /* Action Tokens */
    --action-hover: var(--color-dark-hover);
    --action-pressed: var(--color-dark-pressed);
  }
}

@media (prefers-color-scheme: light) {
  :root[data-theme="auto"] {
    /* Apply light theme tokens when system prefers light mode */
    --color-primary: var(--color-light-primary);
    --color-secondary: var(--color-light-secondary);

    /* Surface Tokens */
    --surface-0: var(--color-light-surface-0);
    --surface-1: var(--color-light-surface-1);
    --surface-2: var(--color-light-surface-2);
    --surface-3: var(--color-light-surface-3);
    --surface-4: var(--color-light-surface-4);
    --surface-positive: var(--color-light-surface-positive);
    --surface-negative: var(--color-light-surface-negative);
    --surface-primary: var(--color-light-surface-primary);

    /* Content Tokens */
    --content-default: var(--color-light-content-default);
    --content-disable: var(--color-light-content-disable);
    --content-ghost: var(--color-light-content-ghost);
    --content-bright: var(--color-light-content-bright);
    --content-din: var(--color-light-content-din);
    --content-muted: var(--color-light-content-ghost);

    /* Border Tokens */
    --border-1: var(--color-light-border-1);
    --border-2: var(--color-light-border-2);
    --border-3: var(--color-light-border-3);

    /* Semantic Status Tokens */
    --color-positive: var(--color-light-positive);
    --color-negative: var(--color-light-negative);
    --color-info: var(--color-light-info);
    --color-system: var(--color-light-system);
    --color-focus: var(--color-light-focus);
    --color-success: var(--color-light-success);
    --color-warning: var(--color-light-warning);
    --color-error: var(--color-light-error);
    --color-delete: var(--color-light-delete);

    /* Extended Color Tokens */
    --color-blue: var(--color-light-extended-blue);
    --color-blue-bright: var(--color-light-extended-blue-bright);
    --color-ocean: var(--color-light-extended-ocean);
    --color-ocean-bright: var(--color-light-extended-ocean-bright);
    --color-green: var(--color-light-extended-green);
    --color-green-bright: var(--color-light-extended-green-bright);
    --color-yellow: var(--color-light-extended-yellow);
    --color-yellow-bright: var(--color-light-extended-yellow-bright);
    --color-orange: var(--color-light-extended-orange);
    --color-orange-bright: var(--color-light-extended-orange-bright);
    --color-red: var(--color-light-extended-red);
    --color-red-bright: var(--color-light-extended-red-bright);
    --color-pink: var(--color-light-extended-pink);
    --color-pink-bright: var(--color-light-extended-pink-bright);
    --color-gray: var(--color-light-extended-gray);
    --color-gray-bright: var(--color-light-extended-gray-bright);

    /* Action Tokens */
    --action-hover: var(--color-light-hover);
    --action-pressed: var(--color-light-pressed);
  }
}

/* Import utility classes */

/* BLiP Design System - Utility Classes */

/* Background Utilities */

.bg-surface-0 {
  background-color: var(--surface-0);
}

.bg-surface-1 {
  background-color: var(--surface-1);
}

.bg-surface-2 {
  background-color: var(--surface-2);
}

.bg-surface-3 {
  background-color: var(--surface-3);
}

.bg-surface-4 {
  background-color: var(--surface-4);
}

.bg-primary {
  background-color: var(--color-primary);
}

.bg-secondary {
  background-color: var(--color-secondary);
}

.bg-brand {
  background-color: var(--color-brand);
}

/* Status Background Colors */

.bg-success {
  background-color: var(--color-success);
}

.bg-warning {
  background-color: var(--color-warning);
}

.bg-error {
  background-color: var(--color-error);
}

.bg-info {
  background-color: var(--color-info);
}

.bg-positive {
  background-color: var(--color-positive);
}

.bg-negative {
  background-color: var(--color-negative);
}

/* Text Color Utilities */

.text-content-default {
  color: var(--content-default);
}

.text-content-ghost {
  color: var(--content-ghost);
}

.text-content-bright {
  color: var(--content-bright);
}

.text-content-disable {
  color: var(--content-disable);
}

.text-content-muted {
  color: var(--content-muted);
}

.text-primary {
  color: var(--color-primary);
}

.text-secondary {
  color: var(--color-secondary);
}

.text-brand {
  color: var(--color-brand);
}

/* Status Text Colors */

.text-success {
  color: var(--color-success);
}

.text-warning {
  color: var(--color-warning);
}

.text-error {
  color: var(--color-error);
}

.text-info {
  color: var(--color-info);
}

.text-positive {
  color: var(--color-positive);
}

.text-negative {
  color: var(--color-negative);
}

/* Border Utilities */

.border-0 {
  border: none;
}

.border-1 {
  border: 1px solid var(--border-1);
}

.border-2 {
  border: 1px solid var(--border-2);
}

.border-3 {
  border: 1px solid var(--border-3);
}

.border-primary {
  border-color: var(--color-primary);
}

.border-success {
  border-color: var(--color-success);
}

.border-warning {
  border-color: var(--color-warning);
}

.border-error {
  border-color: var(--color-error);
}

/* Spacing Utilities */

.p-0 {
  padding: var(--spacing-0);
}

.p-1 {
  padding: var(--spacing-1);
}

.p-2 {
  padding: var(--spacing-2);
}

.p-3 {
  padding: var(--spacing-3);
}

.p-4 {
  padding: var(--spacing-4);
}

.p-5 {
  padding: var(--spacing-5);
}

.p-6 {
  padding: var(--spacing-6);
}

.p-8 {
  padding: var(--spacing-8);
}

.p-10 {
  padding: var(--spacing-10);
}

.p-12 {
  padding: var(--spacing-12);
}

.m-0 {
  margin: var(--spacing-0);
}

.m-1 {
  margin: var(--spacing-1);
}

.m-2 {
  margin: var(--spacing-2);
}

.m-3 {
  margin: var(--spacing-3);
}

.m-4 {
  margin: var(--spacing-4);
}

.m-5 {
  margin: var(--spacing-5);
}

.m-6 {
  margin: var(--spacing-6);
}

.m-8 {
  margin: var(--spacing-8);
}

.m-10 {
  margin: var(--spacing-10);
}

.m-12 {
  margin: var(--spacing-12);
}

/* Border Radius Utilities */

.rounded-none {
  border-radius: var(--radius-none);
}

.rounded-sm {
  border-radius: var(--radius-sm);
}

.rounded {
  border-radius: var(--radius-base);
}

.rounded-md {
  border-radius: var(--radius-md);
}

.rounded-lg {
  border-radius: var(--radius-lg);
}

.rounded-xl {
  border-radius: var(--radius-xl);
}

.rounded-2xl {
  border-radius: var(--radius-2xl);
}

.rounded-3xl {
  border-radius: var(--radius-3xl);
}

.rounded-full {
  border-radius: var(--radius-full);
}

/* Typography Utilities */

.text-xs {
  font-size: var(--font-size-xs);
}

.text-sm {
  font-size: var(--font-size-sm);
}

.text-base {
  font-size: var(--font-size-base);
}

.text-lg {
  font-size: var(--font-size-lg);
}

.text-xl {
  font-size: var(--font-size-xl);
}

.text-2xl {
  font-size: var(--font-size-2xl);
}

.text-3xl {
  font-size: var(--font-size-3xl);
}

.text-4xl {
  font-size: var(--font-size-4xl);
}

.text-5xl {
  font-size: var(--font-size-5xl);
}

.font-thin {
  font-weight: var(--font-weight-thin);
}

.font-light {
  font-weight: var(--font-weight-light);
}

.font-normal {
  font-weight: var(--font-weight-normal);
}

.font-medium {
  font-weight: var(--font-weight-medium);
}

.font-semibold {
  font-weight: var(--font-weight-semibold);
}

.font-bold {
  font-weight: var(--font-weight-bold);
}

.font-extrabold {
  font-weight: var(--font-weight-extrabold);
}

.font-sans {
  font-family: var(--font-family-sans);
}

.font-serif {
  font-family: var(--font-family-serif);
}

.font-mono {
  font-family: var(--font-family-mono);
}

/* Shadow Utilities */

.shadow-sm {
  box-shadow: var(--shadow-sm);
}

.shadow-md {
  box-shadow: var(--shadow-md);
}

.shadow-lg {
  box-shadow: var(--shadow-lg);
}

.shadow-xl {
  box-shadow: var(--shadow-xl);
}

.shadow-2xl {
  box-shadow: var(--shadow-2xl);
}

.shadow-inner {
  box-shadow: var(--shadow-inner);
}

.shadow-none {
  box-shadow: var(--shadow-none);
}

/* Interactive Utilities */

.interactive {
  transition: all 0.2s ease;
  cursor: pointer;
}

.interactive:hover {
  background-color: var(--action-hover);
}

.interactive:active {
  background-color: var(--action-pressed);
}

/* Size Utilities */

.w-0 {
  width: var(--size-0);
}

.w-1 {
  width: var(--size-1);
}

.w-2 {
  width: var(--size-2);
}

.w-3 {
  width: var(--size-3);
}

.w-4 {
  width: var(--size-4);
}

.w-5 {
  width: var(--size-5);
}

.w-6 {
  width: var(--size-6);
}

.w-8 {
  width: var(--size-8);
}

.w-10 {
  width: var(--size-10);
}

.w-12 {
  width: var(--size-12);
}

.h-0 {
  height: var(--size-0);
}

.h-1 {
  height: var(--size-1);
}

.h-2 {
  height: var(--size-2);
}

.h-3 {
  height: var(--size-3);
}

.h-4 {
  height: var(--size-4);
}

.h-5 {
  height: var(--size-5);
}

.h-6 {
  height: var(--size-6);
}

.h-8 {
  height: var(--size-8);
}

.h-10 {
  height: var(--size-10);
}

.h-12 {
  height: var(--size-12);
}

/* Icon Utilities */

.icon-xs {
  width: var(--icon-xs);
  height: var(--icon-xs);
}

.icon-sm {
  width: var(--icon-sm);
  height: var(--icon-sm);
}

.icon-md {
  width: var(--icon-md);
  height: var(--icon-md);
}

.icon-lg {
  width: var(--icon-lg);
  height: var(--icon-lg);
}

.icon-xl {
  width: var(--icon-xl);
  height: var(--icon-xl);
}

.icon-2xl {
  width: var(--icon-2xl);
  height: var(--icon-2xl);
}

/* Global defaults */

html {
  background-color: var(--surface-1);
  color: var(--content-default);
}

body {
  font-family: var(--font-family-sans);
  color: var(--content-default);
  margin: 0;
  padding: 0;
  min-height: 100vh;
}

/* Apply font to all elements by default */

* {
  font-family: inherit;
}