/* =============================================================
   Omni Design System — Design Tokens
   Master source: OMNI-DESIGN-SYSTEM.md
   Bankaool · Wee Digital · Jüsto · Marsam · v1.1
   v1.1 — added Info (blue) status family
   ============================================================= */

/* -------------------------------------------------------------
   Typography
   ------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap');

:root {
  /* Font families */
  --font-display:  'DM Serif Display', Georgia, 'Times New Roman', serif;
  --font-sans:     'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono:     'DM Mono', 'Courier New', Courier, monospace;

  /* Font sizes */
  --text-xs:    9px;
  --text-sm:    11px;
  --text-base:  13px;
  --text-md:    14px;
  --text-lg:    15px;
  --text-xl:    20px;
  --text-2xl:   28px;
  --text-3xl:   36px;
  --text-4xl:   52px;

  /* Font weights */
  --weight-regular: 400;
  --weight-medium:  500;

  /* Line heights */
  --leading-tight:  1.15;
  --leading-snug:   1.35;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  /* Letter spacing */
  --tracking-tighter: -0.03em;
  --tracking-tight:   -0.02em;
  --tracking-snug:    -0.01em;
  --tracking-normal:   0em;
  --tracking-wide:     0.05em;
  --tracking-wider:    0.10em;
  --tracking-widest:   0.16em;
}

/* -------------------------------------------------------------
   Color — Neutral Scale (primary palette)
   ------------------------------------------------------------- */
:root {
  --color-black:      #0A0A0A;
  --color-gray-950:   #111111;
  --color-gray-900:   #1A1A1A;
  --color-gray-800:   #262626;
  --color-gray-700:   #404040;
  --color-gray-600:   #525252;
  --color-gray-500:   #737373;
  --color-gray-400:   #A3A3A3;
  --color-gray-300:   #D4D4D4;
  --color-gray-200:   #E5E5E5;
  --color-gray-100:   #F5F5F5;
  --color-gray-50:    #FAFAFA;
  --color-white:      #FFFFFF;
}

/* -------------------------------------------------------------
   Color — Semantic (status)
   Each family: dot (vivid indicator) + bg / border / text / muted
   ------------------------------------------------------------- */
:root {
  /* Success — green */
  --color-success-dot:      #30A46C;
  --color-success-bg:       #F0F7F0;
  --color-success-border:   #C5DEC5;
  --color-success-text:     #1A5C1A;
  --color-success-muted:    #3A7C3A;

  /* Warning — yellow / amber */
  --color-warning-dot:      #F5A623;
  --color-warning-bg:       #FDF6E3;
  --color-warning-border:   #E8D5A0;
  --color-warning-text:     #7A5A00;
  --color-warning-muted:    #9A7A20;

  /* Danger — red */
  --color-danger-dot:       #E5484D;
  --color-danger-bg:        #FDF0F0;
  --color-danger-border:    #E5C0C0;
  --color-danger-text:      #8B0000;
  --color-danger-muted:     #A04040;

  /* Info — blue (selected / in-progress / links / neutral action) */
  --color-info-dot:         #2D7FF9;
  --color-info-bg:          #EEF4FE;
  --color-info-border:      #BFD6F6;
  --color-info-text:        #0B4FB3;
  --color-info-muted:       #3A6DB0;
}

/* -------------------------------------------------------------
   Spacing Scale
   ------------------------------------------------------------- */
:root {
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-32:  128px;
}

/* -------------------------------------------------------------
   Border Radius
   ------------------------------------------------------------- */
:root {
  --radius-sm:     2px;
  --radius-md:     4px;
  --radius-lg:     6px;
  --radius-xl:     8px;
  --radius-full:   9999px;
}

/* -------------------------------------------------------------
   Border Width
   ------------------------------------------------------------- */
:root {
  --border-thin:    0.5px;
  --border-base:    1px;
  --border-medium:  1.5px;
  --border-thick:   2px;
}

/* -------------------------------------------------------------
   Border Colors
   ------------------------------------------------------------- */
:root {
  --border-color-subtle:   var(--color-gray-100);
  --border-color-default:  var(--color-gray-200);
  --border-color-strong:   var(--color-gray-300);
  --border-color-focus:    var(--color-black);
}

/* -------------------------------------------------------------
   Component Heights (form elements)
   ------------------------------------------------------------- */
:root {
  --height-input-sm:  28px;
  --height-input-md:  36px;
  --height-input-lg:  44px;

  --height-btn-sm:    28px;
  --height-btn-md:    36px;
  --height-btn-lg:    44px;
}

/* -------------------------------------------------------------
   Elevation / Shadow
   ------------------------------------------------------------- */
:root {
  --shadow-0:  none;
  --shadow-1:  0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-2:  0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-3:  0 4px 16px rgba(0, 0, 0, 0.10);
  --shadow-4:  0 8px 32px rgba(0, 0, 0, 0.12);
}

/* -------------------------------------------------------------
   Z-Index Scale
   ------------------------------------------------------------- */
:root {
  --z-base:      0;
  --z-raised:    10;
  --z-dropdown:  100;
  --z-sticky:    200;
  --z-overlay:   300;
  --z-modal:     400;
  --z-toast:     500;
  --z-tooltip:   600;
}

/* -------------------------------------------------------------
   Transition
   ------------------------------------------------------------- */
:root {
  --transition-fast:    0.10s ease;
  --transition-base:    0.15s ease;
  --transition-slow:    0.25s ease;
  --transition-slower:  0.40s ease;
}

/* -------------------------------------------------------------
   Layout
   ------------------------------------------------------------- */
:root {
  --sidebar-width:       220px;
  --sidebar-width-sm:    64px;
  --content-max-width:   1280px;
  --content-max-narrow:  800px;
}

/* -------------------------------------------------------------
   Semantic Aliases — Text
   (use these in components, not raw gray values)
   ------------------------------------------------------------- */
:root {
  --text-primary:    var(--color-black);
  --text-secondary:  var(--color-gray-600);
  --text-tertiary:   var(--color-gray-400);
  --text-disabled:   var(--color-gray-300);
  --text-inverse:    var(--color-white);
  --text-link:       var(--color-info-text);
}

/* -------------------------------------------------------------
   Semantic Aliases — Surface / Background
   ------------------------------------------------------------- */
:root {
  --surface-primary:    var(--color-white);
  --surface-secondary:  var(--color-gray-50);
  --surface-tertiary:   var(--color-gray-100);
  --surface-inverse:    var(--color-black);
  --surface-overlay:    rgba(0, 0, 0, 0.40);
}

/* -------------------------------------------------------------
   Focus Ring
   ------------------------------------------------------------- */
:root {
  --focus-ring: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-black);
}

/* -------------------------------------------------------------
   Numeric / Financial formatting helpers
   (apply font-feature-settings on elements displaying amounts)
   ------------------------------------------------------------- */
.tabular-nums {
  font-family:             var(--font-mono);
  font-variant-numeric:    tabular-nums;
  font-feature-settings:   "tnum";
}