/* ============================================================
   SINGULAR — Design System Tokens
   colors_and_type.css
   ============================================================ */

/* ---------- Webfonts ---------- */

@font-face {
  font-family: "Nunito Sans";
  src: url("fonts/Nunito-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nunito Sans";
  src: url("fonts/Nunito-Italic-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Exo 2";
  src: url("fonts/Exo2-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Exo 2";
  src: url("fonts/Exo2-Italic-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* ============================================================
   TOKENS
   ============================================================ */

:root {
  /* ---------- PRIMARY PALETTE (corporate, all sub-brands) ----- */
  --sg-black:        #080808;  /* 30% use */
  --sg-cardin-green: #152625;  /* 12% use — deep brand green   */
  --sg-spectra:      #38615F;  /* 12% use — mid sage           */
  --sg-jet-stream:   #C6D8CF;  /* 12% use — pale sage          */
  --sg-crudo:        #F1F0E2;  /* 30% use — warm off-white     */

  /* ---------- HIGHLIGHT (sub-brand accent, ~4%) -------------- */
  --sg-spring-bud:        #A9F900;  /* Wealth Management */
  --sg-selective-yellow:  #FFBA00;  /* Services          */
  --sg-deluge:            #8F87AD;  /* Funds             */
  /* Corporate / Aurora MFO defaults to Spectra as accent.       */

  /* ---------- SECONDARY (alerts, charts) -------------------- */
  --sg-persian-red:    #D22D2D;
  --sg-sunset-orange:  #F25252;
  --sg-safety-orange:  #FF5E00;
  --sg-amber:          #FFBF00;
  --sg-sea-green:      #40BF55;
  --sg-blue:           #006FFF;

  /* ---------- NEUTRAL GREYS --------------------------------- */
  --sg-dark-silver:   #888B8D;
  --sg-silver:        #B1B3B3;
  --sg-light-silver:  #EDECEC;
  --sg-d6:            #D6D6D6;
  --sg-676:           #676A6D;

  /* ---------- EXTENDED DATAVIZ (Power BI) ------------------- */
  --sg-green-900: #203A38;
  --sg-green-700: #2C4D4C;
  --sg-green-500: #5C7E7B;
  --sg-green-300: #7F9C97;
  --sg-green-100: #A3BAB3;

  --sg-beige-500: #ABA989;
  --sg-beige-300: #C7C5AB;
  --sg-beige-200: #E3E2CC;
  --sg-beige-100: #F2F0E2;

  --sg-lilac-500: #A59FBD;
  --sg-lilac-300: #BBB6CD;
  --sg-lilac-100: #D1CDDD;

  --sg-orange-500: #F7931E;
  --sg-orange-400: #FBA70F;
  --sg-orange-300: #FFBF00;
  --sg-orange-200: #FFCD3C;
  --sg-orange-100: #FFDA77;

  --sg-bright-500: #63D239;
  --sg-bright-400: #86E61C;
  --sg-bright-300: #A9F900;

  --sg-blue-500: #0091FF;
  --sg-blue-400: #33A7FF;
  --sg-blue-300: #67BDFF;
  --sg-blue-200: #9AD3FF;

  /* ============================================================
     SEMANTIC — light surface (Crudo background)
     ============================================================ */
  --bg:           var(--sg-crudo);
  --bg-elevated:  #FBFAF1;
  --bg-sunken:    #E6E5D6;
  --surface:      #FFFFFF;
  --surface-2:    var(--sg-jet-stream);

  --fg:           var(--sg-black);
  --fg-1:         var(--sg-cardin-green);
  --fg-2:         var(--sg-spectra);
  --fg-muted:     var(--sg-676);
  --fg-subtle:    var(--sg-dark-silver);
  --fg-on-dark:   var(--sg-crudo);

  --border:        rgba(8,8,8,0.10);
  --border-strong: rgba(8,8,8,0.22);
  --divider:       var(--sg-light-silver);

  --accent:        var(--sg-spectra);    /* corporate default */
  --accent-ink:    var(--sg-cardin-green);
  --highlight:     var(--sg-spring-bud); /* re-bind per sub-brand */

  /* Status */
  --status-danger:  var(--sg-persian-red);
  --status-warning: var(--sg-amber);
  --status-success: var(--sg-sea-green);
  --status-info:    var(--sg-blue);

  /* ============================================================
     SPACING — 4px base
     ============================================================ */
  --space-0:  0;
  --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;

  /* Layout margins per brand book: 5–10% of canvas */
  --layout-margin: clamp(20px, 6vw, 96px);

  /* ============================================================
     RADII — minimal, ejecutivo. The brand is geometric / sharp.
     ============================================================ */
  --radius-0:  0;        /* default for hero / brand surfaces */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;     /* cards (cap)                       */
  --radius-pill: 999px;  /* tags, chips                       */
  /* Icon QR position-blocks use small rounded corners (~3px). */

  /* ============================================================
     SHADOWS — subtle, executive. No glow, no neon halo.
     ============================================================ */
  --shadow-xs: 0 1px 0 0 rgba(8,8,8,0.04);
  --shadow-sm: 0 1px 2px 0 rgba(8,8,8,0.06), 0 1px 1px 0 rgba(8,8,8,0.04);
  --shadow-md: 0 6px 16px -6px rgba(8,8,8,0.12), 0 2px 4px -1px rgba(8,8,8,0.05);
  --shadow-lg: 0 18px 40px -12px rgba(21,38,37,0.18), 0 4px 10px -2px rgba(8,8,8,0.06);
  --shadow-inset: inset 0 0 0 1px rgba(8,8,8,0.06);

  /* ============================================================
     MOTION — restrained, premium.
     ============================================================ */
  --ease-standard: cubic-bezier(0.2, 0.0, 0.0, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);
  --dur-fast:   140ms;
  --dur-base:   220ms;
  --dur-slow:   420ms;

  /* ============================================================
     TYPOGRAPHY
     ============================================================ */
  --font-sans:    "Nunito Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-display: "Exo 2", "Nunito Sans", system-ui, sans-serif;
  --font-office:  "Microsoft PhagsPa", "Nunito Sans", system-ui, sans-serif;
  --font-mono:    ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* Weights — match the brand book's labels */
  --w-extralight: 200;
  --w-light:      300;
  --w-regular:    400;
  --w-medium:     500;
  --w-semibold:   600;
  --w-bold:       700;
  --w-extrabold:  800;
  --w-black:      900;

  /* Type scale (executive — restrained, hierarchical) */
  --fs-display:  72px;   /* hero only */
  --fs-h1:       48px;
  --fs-h2:       36px;
  --fs-h3:       28px;
  --fs-h4:       22px;
  --fs-h5:       18px;
  --fs-h6:       15px;   /* tracking +120 in eyebrow contexts */
  --fs-body:     16px;
  --fs-small:    14px;
  --fs-caption:  12px;
  --fs-micro:    10px;

  --lh-display:   1.02;
  --lh-tight:     1.12;
  --lh-snug:      1.25;
  --lh-normal:    1.5;
  --lh-relaxed:   1.65;

  /* Tracking — the brand uses generous tracking on descriptors:
     "Nunito Sans Regular 14pt, Tracking 240" → ~0.24em            */
  --tracking-eyebrow:  0.24em;   /* descriptors, section labels   */
  --tracking-uppercase:0.08em;
  --tracking-tight:    -0.01em;
  --tracking-display:  -0.02em;
}

/* ============================================================
   DARK SURFACE (Cardin Green / Black)
   Apply with .sg-dark on a wrapper.
   ============================================================ */
.sg-dark {
  --bg:           var(--sg-cardin-green);
  --bg-elevated:  #1B2E2D;
  --bg-sunken:    #0F1B1A;
  --surface:      #1B2E2D;
  --surface-2:    var(--sg-spectra);

  --fg:           var(--sg-crudo);
  --fg-1:         var(--sg-jet-stream);
  --fg-2:         var(--sg-jet-stream);
  --fg-muted:     rgba(241,240,226,0.66);
  --fg-subtle:    rgba(241,240,226,0.42);

  --border:        rgba(241,240,226,0.14);
  --border-strong: rgba(241,240,226,0.28);
  --divider:       rgba(241,240,226,0.10);
}

/* Sub-brand highlight re-binding ------------------------------ */
.sg-wm       { --highlight: var(--sg-spring-bud); }
.sg-services { --highlight: var(--sg-selective-yellow); }
.sg-funds    { --highlight: var(--sg-deluge); }
.sg-corp     { --highlight: var(--sg-spectra); }
.sg-aurora   { --highlight: var(--sg-jet-stream); }

/* ============================================================
   BASE TYPE STYLES
   ============================================================ */
html, body { background: var(--bg); color: var(--fg); }
body {
  font-family: var(--font-sans);
  font-weight: var(--w-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Display & headings — Nunito Sans is primary.
   Exo 2 is reserved for data/numeric/UI accents per brand book. */
.sg-display, h1.sg-display {
  font-family: var(--font-sans);
  font-weight: var(--w-light);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
}
h1, .sg-h1 {
  font-family: var(--font-sans);
  font-weight: var(--w-light);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}
h2, .sg-h2 {
  font-family: var(--font-sans);
  font-weight: var(--w-light);
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}
h3, .sg-h3 {
  font-family: var(--font-sans);
  font-weight: var(--w-semibold);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  margin: 0;
}
h4, .sg-h4 {
  font-family: var(--font-sans);
  font-weight: var(--w-semibold);
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  margin: 0;
}
h5, .sg-h5 {
  font-family: var(--font-sans);
  font-weight: var(--w-semibold);
  font-size: var(--fs-h5);
  line-height: var(--lh-snug);
  margin: 0;
}

/* Eyebrow / descriptor — directly from brand book.
   Used for "WEALTH MANAGEMENT", "CORPORATION", section labels. */
.sg-eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--w-regular);
  font-size: 11px;
  line-height: 1;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-1);
}

/* "hub" treatment — slogan emphasis */
.sg-slogan {
  font-family: var(--font-sans);
  font-weight: var(--w-light);
  font-size: var(--fs-h2);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}
.sg-slogan strong {
  font-weight: var(--w-bold);
  color: var(--fg);
}

p, .sg-p {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--fg-1);
  margin: 0 0 1em 0;
  text-wrap: pretty;
}
.sg-small  { font-size: var(--fs-small); line-height: var(--lh-normal); }
.sg-caption{ font-size: var(--fs-caption); line-height: 1.4; color: var(--fg-muted); }
.sg-micro  { font-size: var(--fs-micro);  line-height: 1.4; color: var(--fg-muted); letter-spacing: 0.04em; }

/* Numeric / data — Exo 2 is the brand's secondary face;
   it has a more "engineered" feel suited to tables and KPIs. */
.sg-num, .sg-data {
  font-family: var(--font-display);
  font-feature-settings: "tnum" 1, "lnum" 1;
  font-variant-numeric: tabular-nums lining-nums;
}

code, kbd, .sg-mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

/* Links — restrained, underline on hover, never neon */
a.sg-link {
  color: var(--fg);
  text-decoration: none;
  border-bottom: 1px solid var(--border-strong);
  transition: border-color var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard);
}
a.sg-link:hover { border-color: var(--fg); }

::selection { background: var(--highlight); color: var(--sg-black); }