@use "../base/typography";

@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Onest:wght@100..900&display=swap");

/* ==================================== */
/* FONTS */
/* ==================================== */

$font-onest: "Montserrat", sans-serif;
$font: "Montserrat", sans-serif !important;
$font-bold: "Montserrat", sans-serif !important;
$font-bolder: "Montserrat", sans-serif !important;
$font-header: "Fraunces", "DM Sans", sans-serif !important;

/* ==================================== */
/* LEGACY VARIABLES */
/* ==================================== */

$col-base-dark: #000000;

$col-primary: #fcf8f6;
$col-primary-dark: #0f0f0f;
$col-primary-text: #f79318;
$col-primary-light: #ff6d2e;

$col-white: #ffffff;
$col-light: #f8fafc;
$col-dark: #000000;

$col-secondary: #f79318;

$col-primary-btn: #f79318;

$col-active-btn-bg: #181818;
$col-active-btn-color: #f79318;

$col-sidebar-bg: #ffffff;

$col-success-bg: #d4edda;
$col-success-color: #22c55e;

$col-danger-bg: #f9d7da;
$col-danger-color: #ef4444;

$col-dark-background: #000000;

$col-table-bg: #111111;
$col-border-lining: #18181A;

$col-card: #111111;
$col-card-border: #18181A;

$col-heading-color: #111827;
$col-text-color: #1f2937;

$col-orange: #f79318;

$col-admin-dashboard: #f9f9f9;
$col-admin-table-bg: #f8f8fa;

$col-primary-dark-new: #111111;
$col-panel: #111111;
$col-border-dark-new: #18181A;
$col-content-bg-new: #0a0a0a;
$col-table-heading-new: #171717;
$col-secondary-new: #f79318;

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

:root {
  /* BACKGROUNDS */
  --background: #fcf8f6;
  --background-secondary: #fff5ef;

  --panel: #ffffff;

  --card: #ffffff;
  --card-elevated: #ffffff;

  /* TYPOGRAPHY */
  --text: #1c1c1c;
  --text-muted: #6b7280;
  --heading: #111827;

  /* BORDERS */
  --border: #f1e4dd;
  --border-light: #f8ece6;

  /* BRAND */
  --primary: #f74d04;
  --primary-hover: #e54803;
  --primary-light: #ff6d2e;

  /* ACTIVE STATES */
  --primary-soft: rgba(247, 77, 4, 0.08);
  --primary-soft-border: rgba(247, 77, 4, 0.16);

  /* SIDEBAR */
  --sidebar-bg: #ffffff;

  /* TABLES */
  --table-bg: #ffffff;
  --table-header: #fff5ef;

  /* INPUTS */
  --input-bg: #ffffff;

  /* INTERACTION */
  --hover-bg: #fff5ef;

  /* STATUS */
  --success: #22c55e;
  --success-bg: rgba(34, 197, 94, 0.12);

  --danger: #ef4444;
  --danger-bg: rgba(239, 68, 68, 0.12);

  --warning: #f59e0b;
  --info: #3b82f6;

  /* OVERLAY */
  --overlay: rgba(0, 0, 0, 0.45);

  /* SHADOWS */
  --shadow-sm:
    0 1px 3px rgba(0, 0, 0, 0.05);

  --shadow-md:
    0 10px 24px rgba(0, 0, 0, 0.08);

  --shadow-lg:
    0 24px 48px rgba(0, 0, 0, 0.12);
}

[data-theme="dark"] {
  /* BACKGROUNDS */
  --background: #000000;

  --background-secondary: #080808;

  --panel: #101010;

  --card: #141414;

  --card-elevated: #191919;

  /* TYPOGRAPHY */
  --text: #f5f5f5;
  --text-muted: #909090;
  --heading: #ffffff;

  /* BORDERS */
  --border: #232323;
  --border-light: #2e2e2e;

  /* BRAND */
  --primary: #f74d04;
  --primary-hover: #ff6a28;
  --primary-light: #ff7b42;

  /* ACTIVE STATES */
  --primary-soft: rgba(247, 77, 4, 0.12);
  --primary-soft-border: rgba(247, 77, 4, 0.22);

  /* SIDEBAR */
  --sidebar-bg: #0d0d0d;

  /* TABLES */
  --table-bg: #141414;
  --table-header: #1a1a1a;

  /* INPUTS */
  --input-bg: #141414;

  /* INTERACTION */
  --hover-bg: #1a1a1a;

  /* STATUS */
  --success: #22c55e;
  --success-bg: rgba(34, 197, 94, 0.15);

  --danger: #ef4444;
  --danger-bg: rgba(239, 68, 68, 0.15);

  --warning: #fbbf24;
  --info: #60a5fa;

  /* OVERLAY */
  --overlay: rgba(0, 0, 0, 0.8);

  /* SHADOWS */
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
}