/**
 * Logosphere UI - Main Stylesheet
 * Design tokens and base styles
 */

/**
 * Theme Configuration
 * Logosphere UI Design System
 *
 * Bu dosya tüm renk paletini, tipografiyi ve design token'ları içerir
 */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap");

:host,
:root {
  /* ==================== TYPOGRAPHY ==================== */

  /* Font Families */
  --font-family-base:
    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    sans-serif;
  --font-family-mono:
    "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  /* Font Sizes */
  --font-size-xs: 0.75rem; /* 12px */
  --font-size-sm: 0.875rem; /* 14px */
  --font-size-base: 1rem; /* 16px */
  --font-size-lg: 1.125rem; /* 18px */
  --font-size-xl: 1.25rem; /* 20px */
  --font-size-2xl: 1.5rem; /* 24px */
  --font-size-3xl: 1.875rem; /* 30px */
  --font-size-4xl: 2.25rem; /* 36px */

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

  /* Line Heights */
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;

  /* ==================== SPACING ==================== */

  --spacing-0: 0;
  --spacing-1: 0.25rem; /* 4px */
  --spacing-1-5: 0.375rem; /* 6px */
  --spacing-2: 0.5rem; /* 8px */
  --spacing-3: 0.75rem; /* 12px */
  --spacing-4: 1rem; /* 16px */
  --spacing-5: 1.25rem; /* 20px */
  --spacing-6: 1.5rem; /* 24px */
  --spacing-8: 2rem; /* 32px */
  --spacing-10: 2.5rem; /* 40px */
  --spacing-12: 3rem; /* 48px */
  --spacing-16: 4rem; /* 64px */
  --spacing-20: 5rem; /* 80px */
  --spacing-24: 6rem; /* 96px */

  /* ==================== BORDER RADIUS ==================== */

  --radius-none: 0;
  --radius-sm: 0.25rem; /* 4px */
  --radius-base: 0.5rem; /* 8px */
  --radius-md: 0.75rem; /* 12px */
  --radius-lg: 1rem; /* 16px */
  --radius-xl: 1.5rem; /* 24px */
  --radius-2xl: 2rem; /* 32px */
  --radius-full: 9999px;

  /* ==================== SHADOWS ==================== */

  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  --shadow-base: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);

  /* ==================== Z-INDEX SCALE ==================== */

  --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;

  /* ==================== TRANSITIONS ==================== */

  --transition-speed-fast: 150ms;
  --transition-speed-base: 200ms;
  --transition-speed-slow: 300ms;
  --transition-timing: cubic-bezier(0.4, 0, 0.2, 1);

  /* ==================== LIGHT THEME COLORS ==================== */

  /* Body & Layout */
  --color-body-bg: #ffffff;
  --color-body-bg-rgb: 255, 255, 255;
  --color-body-text: #2b2b2b;
  --color-body-text-rgb: 43, 43, 43;

  /* Hovers */
  --color-outline-hover: #7878780d;

  /* Tertiary Colors */
  --color-tertiary: #8e8e8e;
  --color-tertiary-rgb: 142, 142, 142;
  --color-tertiary-bg: #f8f8f8;
  --color-tertiary-bg-rgb: 248, 248, 248;

  /* Emphasis */
  --color-emphasis: #000000;
  --color-emphasis-rgb: 0, 0, 0;

  /* Borders */
  --color-border: #e0e0e0;
  --color-border-success: #19875424;
  --color-border-warning: #f7c15924;
  --color-border-danger: #da5b5b24;
  --color-border-info: #377dff24;
  --color-border-rgb: 229, 231, 235;
  --color-primary-border-subtle: #f0b8bd;

  /* Primary Brand Color */
  --color-primary: #da5b5b;
  --color-primary-rgb: 218, 88, 91;
  --color-primary-hover: #b94d4d;
  --color-primary-active: #aa4547;
  --color-primary-bg-subtle: #f0b8bd;
  --color-primary-text-emphasis: #da5b5b;

  /* Secondary Colors */
  --color-secondary: #565656;
  --color-secondary-rgb: 187, 187, 187;
  --color-secondary-bg-rgb: 75, 75, 75;
  --color-secondary-hover: #2b2b2b;
  --color-secondary-active: #fffff;

  /* Success Colors */
  --color-success: #198754;
  --color-success-rgb: #ebf7ed;
  --color-success-hover: #125f3b24;
  --color-success-active: #126038;
  --color-success-bg-subtle: #ebf7ed;
  --color-success-text-emphasis: #0e4a2e;
  --color-success-outline-text-emphasis: #157347;

  /* Purple Colors */
  --color-purple: #3D246A;
  --color-purple-rgb: #EDE8F4;
  /* Danger Colors */
  --color-danger: #b94d4d;
  --color-danger-rgb: #b94d4d15;
  --color-danger-hover: #99404024;
  --color-danger-active: #8f343b;
  --color-danger-bg-subtle: #f0b8bd;
  --color-danger-text-emphasis: #662a2a;
  --color-danger-outline-text-emphasis: #783232;

  /* Info Colors */
  --color-info: #377dff24;
  --color-info-rgb: #ebf2ff;
  --color-info-hover: #2f64cc24;
  --color-info-active: #2661cc;
  --color-info-bg-subtle: #acf8ff;
  --color-info-text-emphasis: #1e458c;
  --color-info-outline-text-emphasis: #1e458c;

  /* Warning Colors */
  --color-warning: #f7c15924;
  --color-warning-rgb: #ffedcc;
  --color-warning-hover: #ad873e24;
  --color-warning-active: #f3b128;
  --color-warning-bg-subtle: #ffedcc;
  --color-warning-text-emphasis: #886a31;

  /* Gray Scale */
  --color-gray-50: #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-300: #d1d5db;
  --color-gray-400: #9ca3af;
  --color-gray-500: #6b7280;
  --color-gray-600: #4b5563;
  --color-gray-700: #374151;
  --color-gray-800: #1f2937;
  --color-gray-900: #111827;
}

/* ==================== DARK THEME ==================== */

/*[data-theme="dark"] {*/
/*    !* Body & Layout *!*/
/*    --color-body-bg: #2b2b2b;*/
/*    --color-body-bg-rgb: 43, 43, 43;*/
/*    --color-body-text: #f8f8f8;*/
/*    --color-body-text-rgb: 248, 248, 248;*/

/*    !* Secondary Colors *!*/
/*    --color-secondary: #bbbbbb;*/
/*    --color-secondary-rgb: 187, 187, 187;*/
/*    --color-secondary-bg: #565656;*/
/*    --color-secondary-bg-rgb: 75, 75, 75;*/
/*    --color-secondary-hover: #2B2B2B;*/
/*    --color-secondary-outline-hover: #7878780D;*/

/*    !* Tertiary Colors *!*/
/*    --color-tertiary-bg: #3a3a3a;*/
/*    --color-tertiary-bg-rgb: 58, 58, 58;*/

/*    !* Emphasis *!*/
/*    --color-emphasis: #ffffff;*/
/*    --color-emphasis-rgb: 255, 255, 255;*/

/*    !* Borders *!*/
/*    --color-border: #E0E0E0;*/
/*    --color-border-rgb: 75, 75, 75;*/

/*    !* Primary (Dark Mode) *!*/
/*    --color-primary-hover: #e36366;*/
/*    --color-primary-active: #ed7478;*/
/*    --color-primary-bg-subtle: #572424;*/
/*    --color-primary-border-subtle: #572424;*/
/*    --color-primary-text-emphasis: #eba5a5;*/

/*    !* Success (Dark Mode) *!*/
/*    --color-success-hover: #1fa768;*/
/*    --color-success-active: #25c07e;*/
/*    --color-success-bg-subtle: #0a3622;*/
/*    --color-success-border-subtle: #0a3622;*/
/*    --color-success-text-emphasis: #80bda1;*/

/*    !* Light (Dark Mode) *!*/
/*    --color-light: #4b4b4b;*/
/*    --color-light-hover: #5a5a5a;*/
/*    --color-light-active: #6a6a6a;*/
/*}*/