/* Loopmore tokens as CSS variables, light theme, written from ds/loopmore/tokens.json.
   The Loopmore components (ds/loopmore/components/bundle.css) read every value from these.
   Load this file first, then bundle.css, then site.css. */

@font-face { font-family: "Sora"; src: url("../fonts/Sora-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Sora"; src: url("../fonts/Sora-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Sora"; src: url("../fonts/Sora-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("../fonts/InstrumentSans-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("../fonts/InstrumentSans-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("../fonts/InstrumentSans-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/JetBrainsMono-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/JetBrainsMono-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Loopmore Rupee"; src: url("../fonts/LoopmoreRupee-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; unicode-range: U+20B9; }
@font-face { font-family: "Loopmore Rupee"; src: url("../fonts/LoopmoreRupee-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; unicode-range: U+20B9; }
@font-face { font-family: "Loopmore Rupee"; src: url("../fonts/LoopmoreRupee-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; unicode-range: U+20B9; }

:root {
  /* Fonts */
  --font-display: Sora, "Loopmore Rupee", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-sans: "Instrument Sans", "Loopmore Rupee", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "Loopmore Rupee", ui-monospace, Menlo, Consolas, monospace;

  /* Brand */
  --brand-graphite: #111317;
  --brand-paper: #F3F0EA;
  --brand-coral: #FF6B45;
  --brand-hrms: #055259;
  --brand-crm: #194292;
  --brand-books: #285415;
  --brand-desk: #602A7D;

  /* Surfaces */
  --surface-page: #FFFFFF;
  --surface: #FFFFFF;
  --surface-raised: #FFFFFF;
  --surface-subtle: #FBFAF8;
  --surface-muted: #F6F4F1;
  --surface-hover: #F2F0EC;
  --surface-panel: #F9F8F5;
  --surface-paper: #F3F0EA;
  --surface-band: #111317;
  --on-band: #F3F0EA;
  --on-band-muted: #A3A8B0;
  --band-raised: #1A1D22;
  --band-hover: #1E2127;
  --band-line-subtle: #23262C;
  --band-line: #2A2E35;
  --band-line-strong: #3A3F47;

  /* Text and lines */
  --ink: #111317;
  --ink-body: #4A4F57;
  --ink-muted: #6B7079;
  --ink-faint: #8A8F98;
  --statement-pending: #C9C4BA;
  --link: var(--ink);
  --line: #E8E6E2;
  --line-subtle: #EEEDEA;
  --line-strong: #DBD9D5;
  --line-control: #8A8F98;
  --line-paper: #DDD8CE;

  /* Actions */
  --primary: #111317;
  --primary-hover: #262930;
  --on-primary: #FFFFFF;
  --accent: #FF6B45;
  --accent-hover: #F6623B;
  --accent-pressed: #E45935;
  --accent-edge: #F15F39;
  --on-accent: #111317;
  --accent-soft: #FFEBE6;
  --accent-ink: #B94222;
  --focus: #111317;
  --focus-ring: 0 0 0 2px #ffffff, 0 0 0 4px #111317;
  --focus-ring-band: 0 0 0 2px #111317, 0 0 0 4px #f3f0ea;

  /* Status */
  --success: #126635;
  --success-solid: #21914E;
  --success-soft: #E3F9E8;
  --warning: #7D5002;
  --warning-solid: #C68101;
  --warning-soft: #FFF1E1;
  --danger: #A5292D;
  --danger-solid: #CC3D3F;
  --danger-soft: #FFEEEC;
  --info: #1E5BA1;
  --info-solid: #2D74CA;
  --info-soft: #EBF3FF;
  --neutral: #4A4F57;
  --neutral-solid: #8A8F98;
  --neutral-soft: #F1F0EC;

  /* Products: retired with the four-product line-up; kept for the components */
  --product-hrms: #055259;
  --product-hrms-panel: #F1F9FA;
  --product-hrms-edge: #DBE4E5;
  --product-hrms-selected: #D8EEF1;
  --product-hrms-icon: #055259;
  --product-crm: #194292;
  --product-crm-panel: #F3F7FF;
  --product-crm-edge: #DCE2ED;
  --product-crm-selected: #DEEAFF;
  --product-crm-icon: #194292;
  --product-books: #285415;
  --product-books-panel: #F3F9F1;
  --product-books-edge: #DDE5DB;
  --product-books-selected: #DFF0D9;
  --product-books-icon: #285415;
  --product-desk: #602A7D;
  --product-desk-panel: #FAF5FD;
  --product-desk-edge: #E5DFEA;
  --product-desk-selected: #F1E3FB;
  --product-desk-icon: #602A7D;

  /* Labels */
  --tag-grey: #4A4F57;
  --tag-grey-soft: #EFEEEA;
  --tag-blue: #255691;
  --tag-blue-soft: #E5F0FF;
  --tag-teal: #036260;
  --tag-teal-soft: #D5F7F5;
  --tag-green: #1F652F;
  --tag-green-soft: #E0F6E2;
  --tag-amber: #714E05;
  --tag-amber-soft: #FCEDD6;
  --tag-orange: #83400A;
  --tag-orange-soft: #FFEBDF;
  --tag-pink: #81385E;
  --tag-pink-soft: #FFE8F2;
  --tag-violet: #5F4589;
  --tag-violet-soft: #F2ECFF;

  /* Charts */
  --chart-1: #3072D0;
  --chart-2: #0DA198;
  --chart-3: #7444B4;
  --chart-4: #CA7F10;
  --chart-5: #B94082;
  --chart-neutral: #7E848D;

  /* Space */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;
  --radius-icon: 23.4%;

  /* Sizes */
  --control-sm: 30px;
  --control-md: 34px;
  --control-lg: 40px;
  --control-xl: 52px;
  --touch-min: 44px;
  --nav-item: 32px;
  --badge: 22px;
  --icon-sm: 14px;
  --icon-md: 16px;
  --icon-lg: 20px;
  --panel-left: 236px;
  --topbar: 60px;
  --site-header: 72px;
  --content-max: 1200px;
  --text-max: 680px;

  /* Shadows */
  --shadow-sm: 0 1px 2px #1113170d;
  --shadow-md: 0 2px 4px #1113170a, 0 8px 24px #11131714;
  --shadow-lg: 0 4px 8px #1113170f, 0 20px 48px #11131724;
}