/* =================================================================
   DESIGN TOKENS
   ================================================================= */

/* -----------------------------------------------------------------
   PRIMITIVE TOKENS
   Raw values - the source of truth
   ----------------------------------------------------------------- */

:root {
   /* Colors - Neutral */
   --color-neutral-50: #f7f7f7;
   --color-neutral-100: #e5e5e5;
   --color-neutral-200: #cccccc;
   --color-neutral-400: #999999;
   --color-neutral-600: #666666;
   --color-neutral-800: #333333;
   --color-neutral-900: #202020;
   --color-neutral-1000: #111111;
   --color-white: #ffffff;

   /* Colors - Accents */
   --color-purple-100: #F3E8FF;
   --color-purple-200: #E9D5FF;
   --color-purple-700: #7E22CE;
   --color-purple-800: #6B21A8;
   --color-purple-900: #581C87;

   /* Colors - Green (for PROJECT tags) */
   --color-green-100: #DCFCE7;
   --color-green-200: #BBF7D0;
   --color-green-700: #15803D;
   --color-green-800: #166534;
   --color-green-900: #14532D;

   /* Colors - Orange (for PERSONAL tags) */
   --color-orange-100: #FFEDD5;
   --color-orange-200: #FED7AA;
   --color-orange-700: #C2410C;
   --color-orange-800: #9A3412;
   --color-orange-900: #7C2D12;

   /* Colors - Blue (for EXPERIENCE tags) */
   --color-blue-100: #DBEAFE;
   --color-blue-200: #BFDBFE;
   --color-blue-700: #1D4ED8;
   --color-blue-800: #1E40AF;
   --color-blue-900: #1E3A8A;

   /* Colors - Yellow (for EXPERIMENT tags) */
   --color-yellow-100: #FEF9C3;
   --color-yellow-200: #FEF08A;
   --color-yellow-700: #A16207;
   --color-yellow-800: #854D0E;
   --color-yellow-900: #713F12;

   /* Typography - Font Family */
   --font-family-sans: 'Google Sans Flex', -apple-system, BlinkMacSystemFont, sans-serif;

   /* Typography - Settings */
   --font-settings: "slnt" 0, "wdth" 100, "GRAD" 0, "ROND" 0;

   /* Typography - Font Size */
   --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: 32px;
   --font-size-display: 72px;

   /* Typography - Font Weight */
   --font-weight-light: 300;
   --font-weight-regular: 400;
   --font-weight-medium: 500;
   --font-weight-semibold: 600;
   --font-weight-bold: 600;

   /* Typography - Line Height */
   --line-height-tight: 1.2;
   --line-height-normal: 1.5;
   --line-height-relaxed: 1.6;

   --space-0-5: 2px;
   --space-1: 4px;
   --space-1-5: 6px;
   --space-2: 8px;
   --space-3: 12px;
   --space-4: 16px;
   --space-5: 20px;
   --space-6: 24px;
   --space-8: 32px;
   --space-9: 36px;
   --space-10: 40px;
   --space-12: 48px;
   --space-15: 60px;
   --space-16: 64px;
   --space-18: 72px;

   /* Border Radius */
   --radius-xs: 2px;
   --radius-sm: 4px;
   --radius-md: 4px;
   --radius-lg: 4px;
   --radius-xl: 4px;
   --radius-2xl: 4px;
}

@media (max-width: 1024px) {
   :root {
      --font-size-sm: 16px;
   }
}

/* -----------------------------------------------------------------
   SEMANTIC TOKENS - LIGHT THEME (default)
   ----------------------------------------------------------------- */

:root,
[data-theme="light"] {
   /* Background */
   --bg-page: var(--color-white);
   --bg-card: var(--color-white);
   --bg-card-image: var(--color-neutral-100);
   --bg-overlay: rgba(0, 0, 0, 0.6);

   /* Text */
   --text-primary: var(--color-neutral-900);
   --text-secondary: var(--color-neutral-600);
   --text-muted: var(--color-neutral-400);
   --text-inverse: var(--color-white);

   /* Links */
   --link-color: var(--color-neutral-900);
   --link-hover: var(--color-neutral-600);
   --link-muted: var(--color-neutral-400);

   /* Component: Card */
   --card-bg: transparent;
   --card-radius: var(--radius-sm);
   --card-image-radius: var(--radius-sm);
   --card-padding: 0;
   --card-gap: 10px;

   /* Component: Divider */
   --color-divider: rgba(0, 0, 0, 0.08);

   /* Component: Link Preview */
   --bg-preview: rgba(255, 255, 255, 0.95);
   --radius-preview: 8px;

   /* Component: Tag - Default (SKILL = purple) */
   --tag-bg: var(--color-purple-200);
   --tag-text: var(--color-purple-800);

   /* Tag variants */
   --tag-empty-bg: var(--color-neutral-200);
   --tag-empty-text: var(--color-neutral-600);
   --tag-project-bg: var(--color-green-200);
   --tag-project-text: var(--color-green-800);
   --tag-personal-bg: var(--color-orange-200);
   --tag-personal-text: var(--color-orange-800);
   --tag-experience-bg: var(--color-blue-200);
   --tag-experience-text: var(--color-blue-800);
   --tag-experiment-bg: var(--color-yellow-200);
   --tag-experiment-text: var(--color-yellow-800);

   /* Component: Sidebar */
   --sidebar-width: 280px;
   --sidebar-gap: var(--space-9);

   /* Layout */
   --page-padding: var(--space-15);
   --grid-gap: var(--space-15);
   --grid-vertical-gap: var(--space-18);
   --section-gap: var(--space-9);

   /* Theme Toggle */
   --toggle-bg: var(--color-blue-100);
   --toggle-icon: var(--color-blue-900);

   /* Inputs / Editable Text */
   --input-bg-hover: var(--color-neutral-100);
   --input-bg-focus: var(--color-white);
   --input-border-focus: var(--color-neutral-400);
}

/* -----------------------------------------------------------------
   SEMANTIC TOKENS - DARK THEME
   ----------------------------------------------------------------- */

[data-theme="dark"] {
   /* Background */
   --bg-page: var(--color-neutral-1000);
   --bg-card: var(--color-neutral-900);
   --bg-card-image: var(--color-neutral-900);
   --bg-overlay: rgba(255, 255, 255, 0.1);
   --bg-preview: rgba(20, 20, 20, 0.95);

   /* Component: Divider */
   --color-divider: rgba(255, 255, 255, 0.1);

   /* Text */
   --text-primary: var(--color-white);
   --text-secondary: var(--color-neutral-400);
   --text-muted: var(--color-neutral-600);
   --text-inverse: var(--color-neutral-900);

   /* Links */
   --link-color: var(--color-white);
   --link-hover: var(--color-neutral-400);
   --link-muted: var(--color-neutral-600);

   /* Theme Toggle */
   --toggle-bg: var(--color-yellow-900);
   --toggle-icon: var(--color-yellow-100);

   /* Inputs / Editable Text */
   --input-bg-hover: var(--color-neutral-900);
   --input-bg-focus: var(--color-neutral-900);
   --input-border-focus: var(--color-neutral-600);

   /* Component: Tag */
   --tag-bg: var(--color-purple-900);
   --tag-text: var(--color-purple-200);

   /* Tag variants - Dark theme */
   --tag-empty-bg: var(--color-neutral-800);
   --tag-empty-text: var(--color-neutral-400);
   --tag-project-bg: var(--color-green-900);
   --tag-project-text: var(--color-green-200);
   --tag-personal-bg: var(--color-orange-900);
   --tag-personal-text: var(--color-orange-200);
   --tag-experience-bg: var(--color-blue-900);
   --tag-experience-text: var(--color-blue-200);
   --tag-experiment-bg: var(--color-yellow-900);
   --tag-experiment-text: var(--color-yellow-200);
}