/* =========================================================================
   Yuno Design System — Core Tokens
   Colors, type, spacing, radius, shadow.
   ========================================================================= */

/* ---- Fonts ------------------------------------------------------------- */
/* Yuno's brand typeface is **Titillium Web** — a humanist-geometric sans with
   a strong architectural feel that matches the lowercase `y` in the wordmark.
   We ship all weights for both display and body. For monospace (dashboards,
   transaction IDs, code, tabular figures) we pair with `JetBrains Mono`
   via Google Fonts. */

@font-face { font-family: 'Titillium Web'; font-weight: 200; font-style: normal; font-display: swap; src: url('fonts/TitilliumWeb-ExtraLight.ttf') format('truetype'); }
@font-face { font-family: 'Titillium Web'; font-weight: 200; font-style: italic; font-display: swap; src: url('fonts/TitilliumWeb-ExtraLightItalic.ttf') format('truetype'); }
@font-face { font-family: 'Titillium Web'; font-weight: 300; font-style: normal; font-display: swap; src: url('fonts/TitilliumWeb-Light.ttf') format('truetype'); }
@font-face { font-family: 'Titillium Web'; font-weight: 300; font-style: italic; font-display: swap; src: url('fonts/TitilliumWeb-LightItalic.ttf') format('truetype'); }
@font-face { font-family: 'Titillium Web'; font-weight: 400; font-style: normal; font-display: swap; src: url('fonts/TitilliumWeb-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Titillium Web'; font-weight: 400; font-style: italic; font-display: swap; src: url('fonts/TitilliumWeb-Italic.ttf') format('truetype'); }
@font-face { font-family: 'Titillium Web'; font-weight: 600; font-style: normal; font-display: swap; src: url('fonts/TitilliumWeb-SemiBold.ttf') format('truetype'); }
@font-face { font-family: 'Titillium Web'; font-weight: 600; font-style: italic; font-display: swap; src: url('fonts/TitilliumWeb-SemiBoldItalic.ttf') format('truetype'); }
@font-face { font-family: 'Titillium Web'; font-weight: 700; font-style: normal; font-display: swap; src: url('fonts/TitilliumWeb-Bold.ttf') format('truetype'); }
@font-face { font-family: 'Titillium Web'; font-weight: 700; font-style: italic; font-display: swap; src: url('fonts/TitilliumWeb-BoldItalic.ttf') format('truetype'); }
@font-face { font-family: 'Titillium Web'; font-weight: 900; font-style: normal; font-display: swap; src: url('fonts/TitilliumWeb-Black.ttf') format('truetype'); }

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ---- Brand colors (canonical) --------------------------------------- */
  --yuno-blue:        #3E4FE0;   /* primary */
  --yuno-black:       #282A30;   /* "Unity Black" */
  --yuno-lilac:       #E8EAF5;   /* "Harmony Lilac" */
  --yuno-green:       #E0ED80;   /* "Innovation Green" */
  --yuno-white:       #FFFFFF;

  /* ---- Extended neutrals (derived from Unity Black) ------------------- */
  --neutral-0:   #FFFFFF;
  --neutral-50:  #F7F8FB;
  --neutral-100: #EFF1F6;
  --neutral-150: #E8EAF5;  /* == Harmony Lilac */
  --neutral-200: #D9DCE8;
  --neutral-300: #BDC1D3;
  --neutral-400: #8E93A8;
  --neutral-500: #6A6F83;
  --neutral-600: #4A4E5E;
  --neutral-700: #363944;
  --neutral-800: #282A30;  /* == Unity Black */
  --neutral-900: #1A1C21;
  --neutral-950: #101116;

  /* ---- Blue scale (derived from Yuno Blue) ---------------------------- */
  --blue-50:  #EEF0FC;
  --blue-100: #DADEF8;
  --blue-200: #B5BCF1;
  --blue-300: #8F9AEA;
  --blue-400: #6A78E5;
  --blue-500: #3E4FE0;  /* == Yuno Blue */
  --blue-600: #3240B7;
  --blue-700: #262F89;
  --blue-800: #1A205C;
  --blue-900: #0D1132;

  /* ---- Green scale (accent) ------------------------------------------- */
  --green-50:  #F7FBE4;
  --green-100: #EFF5C9;
  --green-200: #E0ED80;  /* == Innovation Green */
  --green-300: #C8D560;
  --green-400: #A7B348;
  --green-500: #7D8730;

  /* ---- Semantic (status) ---------------------------------------------- */
  --success: #2BA971;
  --success-bg: #E8F6EF;
  --warning: #E0A020;
  --warning-bg: #FBF2DC;
  --danger:  #D8434B;
  --danger-bg:  #FBE7E8;
  --info:    var(--yuno-blue);
  --info-bg: var(--blue-50);

  /* ---- Semantic: foreground ------------------------------------------- */
  --fg:          var(--neutral-800);   /* primary text */
  --fg-muted:    var(--neutral-600);   /* secondary text */
  --fg-subtle:   var(--neutral-500);   /* captions, metadata */
  --fg-disabled: var(--neutral-400);
  --fg-inverse:  var(--neutral-0);
  --fg-brand:    var(--yuno-blue);
  --fg-on-brand: var(--neutral-0);

  /* ---- Semantic: background ------------------------------------------- */
  --bg:          var(--neutral-0);     /* page */
  --bg-subtle:   var(--neutral-50);    /* secondary surfaces */
  --bg-muted:    var(--neutral-100);   /* tertiary surfaces */
  --bg-accent:   var(--neutral-150);   /* Harmony Lilac tint blocks */
  --bg-inverse:  var(--neutral-800);
  --bg-brand:    var(--yuno-blue);
  --bg-brand-subtle: var(--blue-50);

  /* ---- Semantic: border ----------------------------------------------- */
  --border:        var(--neutral-200);
  --border-subtle: var(--neutral-100);
  --border-muted:  var(--neutral-150);
  --border-brand:  var(--yuno-blue);

  /* ---- Typography ----------------------------------------------------- */
  --font-body:    'Titillium Web', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-display: var(--font-body);
  --font-mono:    'JetBrains Mono', 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, monospace;

  /* ---- Spacing -------------------------------------------------------- */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  12px;
  --space-lg:  16px;
  --space-xl:  24px;
  --space-2xl: 32px;
  --space-3xl: 48px;

  /* ---- Radius --------------------------------------------------------- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-round: 999px;

  /* ---- Shadow --------------------------------------------------------- */
  --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-md:  0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadow-lg:  0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --shadow-xl:  0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

/* ---- Base styles ------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.5;
  color: var(--fg);
  background-color: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---- Text utilities ---------------------------------------------------- */
.text-xs    { font-size: 0.75rem; line-height: 1rem; }       /* 12px */
.text-sm    { font-size: 0.875rem; line-height: 1.25rem; }   /* 14px */
.text-base  { font-size: 1rem; line-height: 1.5rem; }        /* 16px */
.text-lg    { font-size: 1.125rem; line-height: 1.75rem; }   /* 18px */
.text-xl    { font-size: 1.25rem; line-height: 1.75rem; }    /* 20px */
.text-2xl   { font-size: 1.5rem; line-height: 2rem; }        /* 24px */
.text-3xl   { font-size: 1.875rem; line-height: 2.25rem; }   /* 30px */
.text-4xl   { font-size: 2.25rem; line-height: 2.5rem; }     /* 36px */
.text-5xl   { font-size: 3rem; line-height: 1; }             /* 48px */

/* Weight utilities */
.font-light    { font-weight: 300; }
.font-normal   { font-weight: 400; }
.font-medium   { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold     { font-weight: 700; }
.font-black    { font-weight: 900; }

/* Color utilities */
.text-muted     { color: var(--fg-muted); }
.text-subtle    { color: var(--fg-subtle); }
.text-good      { color: var(--success); }
.text-warn      { color: var(--warning); }
.text-bad       { color: var(--danger); }
.text-brand     { color: var(--fg-brand); }

/* Dashboard-specific typography */
.text-metric    {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.text-label     {
  font-size: 0.6875rem; /* 11px */
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-muted);
}
.text-caption   {
  font-size: 0.6875rem; /* 11px */
  color: var(--fg-subtle);
  line-height: 1.4;
}