@use "./mixins/index"as *;
@forward "typography";

:root {
  // Font family
  --font-primary: "Overpass", sans-serif;
  --font-secondary: "Oxanium", sans-serif;

  // Theme base color start

  // Color primary
  --color-primary: #2C6D82;
  --color-primary-soft: #f5e2db;
  --color-primary-light: rgba(246, 75, 78, 0.4);
  --color-primary-text: #ffffff;

  // Color secondary
  --color-secondary: #ffa360;
  --color-secondary-soft: #eefffe;
  --color-secondary-text: #192227;

  // Color success
  --color-success: #03c988;
  --color-success-light: rgba(35, 197, 129, 0.2);

  // Color danger
  --color-danger: #d92d20;
  --color-danger-light: rgba(255, 37, 37, 0.15);

  // Color warning
  --color-warning: #ffc700;
  --color-warning-light: rgba(247, 184, 75, 0.2);

  // Color info
  --color-info: #299cdb;
  --color-info-light: rgba(84, 160, 254, 0.2);

  // Color dark
  --color-dark: #222325;
  --color-dark-light: rgb(21, 33, 48, 0.1);

  // Base text color
  --text-primary: #141414;
  --text-secondary: #666D80;
  --text-ternary: #9b9b9c;
  --text-light: #ffffff;


  // Border color
  --border-primary: #94918e;
  --border-secondary: #c4c4c4;
  --border-ternary: #E9E9E9;

  --color-white: #FFFFFF;
  --color-gray-1: #f7f8f9;
  --gray-100: #fcfcfd;
  --gray-200: #eaecf0;
  --gray-300: #d0d5dd;
  --gray-500: #667085;

  // Base Layout color
  --site-bg: #F7F8F9;
  --card-bg: #ffffff;
  --topbar-bg: #ffffff;
  --sidebar-bg: #e9f0ff;
  --footer-bg: #ffffff;

  // Base Border radius
  --radius-4: 4px;
  --radius-8: 8px;
  --radius-12: 12px;
  --radius-16: 16px;
  --radius-20: 20px;
  --radius-24: 24px;
  --radius-28: 28px;
  --radius-32: 32px;
  --radius-36: 36px;
  --radius-pill: calc(infinity * 1px);
  --radius-rounded: 50%;
}


@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    // Base text color
    --text-primary: #f9fafb;
    --text-secondary: #cbd5e1;
    --text-ternary: #94a3b8;
    --text-light: #ffffff;

    // Border color
    --border-primary: #374151;
    --border-secondary: #4b5563;
    --border-ternary: #33363e;

    // Neutral palette
    --color-white: #0f172a;
    --color-gray-1: #1e293b;
    --gray-100: #111827;
    --gray-200: #1e293b;
    --gray-300: #374151;
    --gray-500: #6b7280;

    // Base Layout color
    --site-bg: #202121;
    --card-bg: #121212;
    --topbar-bg: #121212;
    --sidebar-bg: #1e293b;
    --footer-bg: #121212;
  }
}

@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    // Base text color
    --text-primary: #141414;
    --text-secondary: #666D80;
    --text-ternary: #9b9b9c;
    --text-light: #ffffff;

    // Border color
    --border-primary: #94918e;
    --border-secondary: #c4c4c4;
    --border-ternary: #E9E9E9;

    // Color dark
    --color-dark: #222325;
    --color-dark-light: rgb(21, 33, 48, 0.1);

    // Neutral palette
    --color-white: #FFFFFF;
    --color-gray-1: #eff2f7;
    --gray-100: #fcfcfd;
    --gray-200: #eaecf0;
    --gray-300: #d0d5dd;
    --gray-500: #667085;

    // Base Layout color
    --site-bg: #F7F8F9;
    --card-bg: #ffffff;
    --topbar-bg: #ffffff;
    --sidebar-bg: #e9f0ff;
    --footer-bg: #ffffff;
  }
}

// Media color preference end

[data-bs-theme="dark"] {
  color-scheme: dark;
  // Base text color
  --text-primary: #f9fafb;
  --text-secondary: #c5c6c7;
  --text-ternary: #94a3b8;
  --text-light: #ffffff;

  // Border color
  --border-primary: #374151;
  --border-secondary: #4b5563;
  --border-ternary: #33363e;

  // Neutral palette
  --color-white: #0f172a;
  --color-gray-1: #1f2529;
  --gray-100: #111827;
  --gray-200: #1e293b;
  --gray-300: #374151;
  --gray-500: #6b7280;

  // Base Layout color
    --site-bg: #161c21;
    --card-bg: #1f2529;
    --topbar-bg: #1f2529;
    --sidebar-bg: #1e293b;
    --footer-bg: #121212;
}

[data-bs-theme="light"] {
  color-scheme: light;
    // Base text color
    --text-primary: #141414;
    --text-secondary: #666D80;
    --text-ternary: #9b9b9c;
    --text-light: #ffffff;

    // Border color
    --border-primary: #94918e;
    --border-secondary: #c4c4c4;
    --border-ternary: #E9E9E9;

    // Color dark
    --color-dark: #222325;
    --color-dark-light: rgb(21, 33, 48, 0.1);

    // Neutral palette
    --color-white: #FFFFFF;
    --color-gray-1: #eff2f7;
    --gray-100: #fcfcfd;
    --gray-200: #eaecf0;
    --gray-300: #d0d5dd;
    --gray-500: #667085;

    // Base Layout color
    --site-bg: #F7F8F9;
    --card-bg: #ffffff;
    --topbar-bg: #ffffff;
    --sidebar-bg: #e9f0ff;
    --footer-bg: #ffffff;
}


// SASS ROOT VARIABLES
$font-primary: var(--font-primary);
$font-secondary: var(--font-secondary);
// Theme base color start
$color-primary: var(--color-primary);
$color-primary-soft: var(--color-primary-soft);
$color-primary-light: var(--color-primary-light);
$color-primary-text: var(--color-primary-text);
$color-gradient: var(--color-gradient);

$color-secondary: var(--color-secondary);
$color-secondary-soft: var(--color-secondary-soft);
$color-secondary-text: var(--color-secondary-text);

$color-success: var(--color-success);
$color-success-light: var(--color-success-light);

$color-danger: var(--color-danger);
$color-danger-light: var(--color-danger-light);

$color-warning: var(--color-warning);
$color-warning-light: var(--color-warning-light);

$color-info: var(--color-info);
$color-info-light: var(--color-info-light);

$color-dark: var(--color-dark);
$color-dark-light: var(--color-dark-light);

// Base text color
$text-primary: var(--text-primary);
$text-secondary: var(--text-secondary);
$text-ternary: var(--text-ternary);
$text-light: var(--text-light);

// Border color
$border-primary: var(--border-primary);
$border-secondary: var(--border-secondary);
$border-ternary: var(--border-ternary);

$color-gray-1: var(--color-gray-1);
$gray-100: var(--gray-100);
$gray-200: var(--gray-200);
$gray-300: var(--gray-300);
$gray-500: var(--gray-500);
$color-white: var(--color-white);

// Layout background
$site-bg: var(--site-bg);
$card-bg: var(--card-bg);
$topbar-bg: var(--topbar-bg);
$sidebar-bg: var(--sidebar-bg);
$footer-bg: var(--footer-bg);

// Radius
$radius-4: var(--radius-4);
$radius-8: var(--radius-8);
$radius-12: var(--radius-12);
$radius-16: var(--radius-16);
$radius-20: var(--radius-20);
$radius-24: var(--radius-24);
$radius-28: var(--radius-28);
$radius-32: var(--radius-32);
$radius-36: var(--radius-36);
$radius-pill: var(--radius-pill);
$radius-rounded: var(--radius-rounded);