/* =============================================================
   Luware Nimbus Design System
   Colors + Type tokens, extracted from the Atomic Design Figma
   (page: /Primitive-Tokens/Light-theme, /Design-Tokens/color-tokens)
   ============================================================= */

/* ---------- fonts ---------- */
/* Segoe UI "This" is Microsoft's embeddable Segoe variant — this is the
   real Nimbus product face. CircularXX TT (display/marketing) substitutes
   to Manrope. Cascadia Mono is used for mono/code.

   Manrope and Cascadia Mono are SELF-HOSTED (same-origin, /fonts) rather than
   pulled from Google Fonts / jsDelivr. This keeps every subresource
   same-origin (no external font CSS/woff2), lets the CSP drop
   fonts.googleapis.com / fonts.gstatic.com, and removes a broken jsDelivr pin.
   Only the weights the app renders are shipped: Manrope 700 (.nm-h1/.nm-display,
   --fw-bold) + 800 (brand lockup), Cascadia Mono 400 (.nm-mono/.nm-code).
   latin + latin-ext subsets, unicode-ranges copied from Google's css2 output. */
@font-face{
  font-family:"Manrope"; font-style:normal; font-weight:700; font-display:swap;
  src:url("fonts/manrope-700-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Manrope"; font-style:normal; font-weight:700; font-display:swap;
  src:url("fonts/manrope-700-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Manrope"; font-style:normal; font-weight:800; font-display:swap;
  src:url("fonts/manrope-800-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Manrope"; font-style:normal; font-weight:800; font-display:swap;
  src:url("fonts/manrope-800-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Cascadia Mono"; font-style:normal; font-weight:400; font-display:swap;
  src:url("fonts/cascadia-mono-400-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Cascadia Mono"; font-style:normal; font-weight:400; font-display:swap;
  src:url("fonts/cascadia-mono-400-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face{
  font-family:"Segoe UI";
  src:url("fonts/segoeuithis.ttf") format("truetype");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Segoe UI";
  src:url("fonts/segoeuithisi.ttf") format("truetype");
  font-weight:400; font-style:italic; font-display:swap;
}
@font-face{
  font-family:"Segoe UI";
  src:url("fonts/segoeuithisz.ttf") format("truetype");
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Segoe UI";
  src:url("fonts/segoeuithibd.ttf") format("truetype");
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Nimbus-Icons-Light";
  src:url("fonts/Nimbus-Icons-Light.ttf") format("truetype");
  font-display:block; /* don't fall back — icons would be unreadable */
}
@font-face{
  font-family:"Nimbus-Icons-Solid";
  src:url("fonts/Nimbus-Icons-Solid.ttf") format("truetype");
  font-display:block;
}

/* helper class — wrap any icon name in <i class="ni">home</i> and the
   font's GSUB ligatures collapse the word to a glyph. */
.ni, .ni-s {
  display:inline-block;
  font-style:normal;
  font-weight:normal;
  line-height:1;
  text-transform:none !important;
  letter-spacing:normal !important;
  -webkit-font-feature-settings:"liga";
  font-feature-settings:"liga";
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  speak:none;
  vertical-align:-0.125em;
}
.ni  { font-family:"Nimbus-Icons-Light"; }
.ni-s{ font-family:"Nimbus-Icons-Solid"; }

:root {
  /* ===========================================================
     PRIMITIVE TOKENS — light theme (from /Primitive-Tokens/Light-theme)
     naming preserved verbatim: {group}-{hue}-{weight}
     =========================================================== */

  /* bright-neutral */
  --n-000:            #0C0D0F;   /* "000-10" — light-theme 000 sits on white, same hex, 10% */
  --n-black:          #0C0D0F;
  --n-dark-gunmetal:  #1C2129;   /* brand dark / default text            (used 1420×) */
  --n-dark-gray:      #42464D;
  --n-gray:           #686B70;   /* secondary text                        (used 329×) */
  --n-gray-hover:     #515357;
  --n-gray-click:     #3D3D3D;
  --n-ash-gray:       #B3B5B8;   /* muted text / disabled                 (used 1041×) */
  --n-light-gray:     #F3F2F1;   /* surface-2, grid background            (used 79×)  */
  --n-white:          #FFFFFF;

  /* bright-colors */
  --c-mellow-yellow:     #FFD426;
  --c-fawn-orange:       #EC9E32;   /* warning / accent                    (used 161×) */
  --c-fawn-orange-hover: #D48E2D;
  --c-fawn-orange-click: #BA7D27;   /* used 40× */
  --c-fawn-orange-high:  #F3D07A;
  --c-fawn-orange-low:   #AD7D2F;
  --c-pale-copper:       #D8673F;
  --c-pale-copper-high:  #E69C82;
  --c-pale-copper-low:   #9F5238;
  --c-old-brick:         #AF5050;
  --c-old-brick-high:    #CB8EBD;
  --c-old-brick-low:     #824344;
  --c-razzmic-berry:     #863C60;   /* used 17× */
  --c-razzmic-berry-20:  rgba(134,60,96,.2);
  --c-bittersweet-red:   #C5314B;   /* attention / destructive             (used 193×) */
  --c-bittersweet-hover: #AB2A41;
  --c-bittersweet-click: #912437;   /* used 36× */
  --c-bittersweet-high:  #DA798A;
  --c-bittersweet-low:   #923C40;
  --c-vivid-blue:        #0755CB;   /* links                               (used 62×)  */
  --c-soft-blue:         #276ED9;   /* used 13× */
  --c-honey-flower:      #4F5186;   /* BRAND PRIMARY (purple)              (used 757×) */
  --c-honey-flower-hover:#41428C;
  --c-honey-flower-click:#3233A4;
  --c-honey-flower-75:   #6568A1;   /* used 29× */
  --c-honey-flower-35:   #9A9CBC;
  --c-honey-flower-20:   #C1C2D3;
  --c-honey-flower-10:   #D8DAE6;
  --c-honey-flower-5:    #ECECF2;
  --c-ming:              #3D6D71;
  --c-ming-high:         #81A6A3;
  --c-ming-low:          #33565B;
  --c-jungle-green:      #33946C;   /* success / available                 (used 159×) */
  --c-jungle-green-75:   #339468; 
  --c-jungle-green-hover:#267647;
  --c-jungle-green-click:#216147;
  --c-jungle-green-high: #7ABA9F;
  --c-jungle-green-low:  #2C7188;   /* misread by parser — kept as is */
  --c-mountain-meadow:   #2ABA68;   /* toast success                       (used 91×)  */
  --c-mountain-meadow-hover:#35A163;
  --c-mountain-meadow-click:#5A679B;
  --c-mountain-meadow-high: #74029D;
  --c-mountain-meadow-low:  #259E55;
  --c-luminous-white:    #F4F8FB;

  /* ===========================================================
     SEMANTIC TOKENS — design-tokens page mappings
     =========================================================== */

  /* text */
  --text-default:      var(--n-dark-gunmetal);      /* body copy              */
  --text-secondary:    var(--n-gray);               /* captions, helper       */
  --text-tertiary:     var(--n-ash-gray);           /* disabled, placeholder  */
  --text-inverse:      var(--n-white);
  --text-link:         var(--c-vivid-blue);
  --text-brand:        var(--c-honey-flower);
  --text-attention:    var(--c-bittersweet-red);
  --text-success:      var(--c-jungle-green);
  --text-warning:      var(--c-fawn-orange);

  /* background / surface */
  --bg-page:           var(--n-light-gray);         /* grid bg in admin/portal */
  --bg-surface:        var(--n-white);              /* card / panel            */
  --bg-surface-alt:    #FAFAF9;                     /* striped row             */
  --bg-inverse:        var(--n-dark-gunmetal);      /* cover / hero            */
  --bg-brand:          var(--c-honey-flower);
  --bg-attention:      var(--c-bittersweet-red);
  --bg-success:        var(--c-jungle-green);
  --bg-warning:        var(--c-fawn-orange);

  /* grid (tables, lists) */
  --grid-hover:        var(--c-honey-flower-5);
  --grid-border:       rgba(28,33,41,.10);
  --grid-border-first: rgba(28,33,41,.10);

  /* focus / selection (from Figma design-tokens "var(--focus)" hints) */
  --focus-ring:        var(--c-honey-flower);

  /* dividers & borders */
  --border-default:    rgba(28,33,41,.10);
  --border-strong:     var(--n-ash-gray);
  --border-brand:      var(--c-honey-flower);

  /* shadows ("var(--box-shadow)" in figma = ash-gray @ 40%) */
  --shadow-xs:   0 1px 2px rgba(155,155,155,.20);
  --shadow-sm:   0 2px 4px rgba(155,155,155,.25);
  --shadow-md:   0 4px 10px rgba(155,155,155,.30);
  --shadow-lg:   0 10px 24px rgba(155,155,155,.40);
  --shadow-xl:   0 20px 48px rgba(0,0,0,.15);
  --shadow-inset:inset 0 0 0 1px rgba(28,33,41,.10);

  /* ===========================================================
     TYPE
     =========================================================== */
  --font-sans: "Segoe UI", "Segoe UI Web (West European)",
               -apple-system, BlinkMacSystemFont, "Helvetica Neue",
               Arial, sans-serif;
  --font-display: "CircularXX TT", "Manrope", "Segoe UI",
                  -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "Cascadia Mono", "Cascadia Code", ui-monospace,
               SFMono-Regular, Menlo, Consolas, monospace;

  /* figma text sizes (Segoe UI usage) */
  --fs-9:  9px;    /* micro (counter badges, data) */
  --fs-10: 10px;   /* micro label */
  --fs-12: 12px;   /* small / button / caption (456 uses) */
  --fs-14: 14px;   /* body + field text (406 uses) */
  --fs-16: 16px;   /* strong body / h4 */
  --fs-18: 18px;   /* h3 */
  --fs-20: 20px;   /* h2 */
  --fs-24: 24px;   /* h1 sm */
  --fs-26: 26px;
  --fs-32: 32px;   /* display (CircularXX TT bold) */

  --lh-tight:  1.0;
  --lh-snug:   1.1;
  --lh-body:   1.35;
  --lh-relaxed:1.5;

  --fw-light:    300;
  --fw-regular:  400;
  --fw-semi:     600;
  --fw-bold:     700;

  /* ===========================================================
     SPACING + RADII (observed in Figma: 4, 8, 10, 12, 20, 24, 32)
     =========================================================== */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 10px;
  --space-4: 12px;
  --space-5: 16px;
  --space-6: 20px;
  --space-7: 24px;
  --space-8: 32px;
  --space-9: 40px;

  --radius-0: 0;
  --radius-1: 2px;   /* buttons, tags, pills — Nimbus uses VERY tight radii */
  --radius-2: 4px;
  --radius-3: 5px;   /* cards / panels */
  --radius-4: 8px;
  --radius-pill: 999px;

  /* grid baseline */
  --control-height-s: 24px;  /* compact button, tag */
  --control-height-m: 32px;
  --control-height-l: 40px;
}

/* ===========================================================
   SEMANTIC TYPE CLASSES (use these directly on elements)
   Nimbus uses Segoe UI for all product UI. CircularXX TT is
   reserved for marketing/cover display.
   =========================================================== */
html, body { font-family: var(--font-sans); color: var(--text-default); }

.nm-display {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(40px, 6vw, 96px);
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  color: var(--text-default);
}
.nm-h1 { font: var(--fw-bold) var(--fs-32)/var(--lh-tight)  var(--font-display); color: var(--text-default); }
.nm-h2 { font: var(--fw-semi) var(--fs-20)/var(--lh-snug)   var(--font-sans);    color: var(--text-default); }
.nm-h3 { font: var(--fw-semi) var(--fs-18)/var(--lh-snug)   var(--font-sans);    color: var(--text-default); }
.nm-h4 { font: var(--fw-semi) var(--fs-16)/var(--lh-snug)   var(--font-sans);    color: var(--text-default); }
.nm-body    { font: var(--fw-regular) var(--fs-14)/var(--lh-body)  var(--font-sans); color: var(--text-default); }
.nm-body-sm { font: var(--fw-regular) var(--fs-12)/var(--lh-body)  var(--font-sans); color: var(--text-default); }
.nm-caption { font: var(--fw-regular) var(--fs-12)/var(--lh-snug)  var(--font-sans); color: var(--text-secondary); }
.nm-label   { font: var(--fw-semi) var(--fs-12)/var(--lh-snug)  var(--font-sans); color: var(--text-secondary); text-transform: none; letter-spacing: .01em; }
.nm-button  { font: var(--fw-bold) var(--fs-12)/var(--lh-tight) var(--font-sans); }
.nm-mono    { font: var(--fw-regular) var(--fs-14)/var(--lh-body) var(--font-mono); }
.nm-code    { font: var(--fw-regular) var(--fs-14)/var(--lh-body) var(--font-mono); background: var(--n-light-gray); padding: 2px 6px; border-radius: var(--radius-1); }
.nm-link    { color: var(--text-link); text-decoration: none; border-bottom: 1px solid currentColor; }
.nm-link:hover { color: var(--c-soft-blue); }