/* ============================================================
   Cyte Design System — Core tokens
   Colors, typography, spacing, radii, shadows.
   Pair with fonts/ for Decimal. Source Sans Pro via Google Fonts.
   ============================================================ */

/* ---------- Decimal (headings only) ---------- */
@font-face { font-family: "Decimal"; src: url("fonts/Decimal-Light.otf") format("opentype");        font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Decimal"; src: url("fonts/Decimal-LightItalic.otf") format("opentype");  font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Decimal"; src: url("fonts/Decimal-Book.otf") format("opentype");         font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Decimal"; src: url("fonts/Decimal-BookItalic.otf") format("opentype");   font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Decimal"; src: url("fonts/Decimal-Medium.otf") format("opentype");       font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Decimal"; src: url("fonts/Decimal-MediumItalic.otf") format("opentype"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Decimal"; src: url("fonts/Decimal-Semibold.otf") format("opentype");     font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Decimal"; src: url("fonts/Decimal-SemiboldItalic.otf") format("opentype"); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: "Decimal"; src: url("fonts/Decimal-Bold.otf") format("opentype");         font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Decimal"; src: url("fonts/Decimal-BoldItalic.otf") format("opentype");   font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Decimal"; src: url("fonts/Decimal-Black.otf") format("opentype");        font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Decimal"; src: url("fonts/Decimal-BlackItalic.otf") format("opentype");  font-weight: 900; font-style: italic; font-display: swap; }

/* ---------- Source Sans 3 (body) ---------- */
@import url("https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,600&family=JetBrains+Mono:wght@400;500;600&display=swap");

/* Material Symbols (the Google icon set the spec calls for) */
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,300..700,0..1,-25..0&display=swap");

:root {
  /* ===== BRAND COLORS ===== */
  --cyte-blue:        #0B188F;   /* primary brand */
  --cyte-green:       #3FAB24;   /* primary accent / logo dash */

  /* Blue ramp — opacity-derived (per spec: tints of #0B188F on white) */
  --cyte-blue-5:      #F3F3F9;   /* 5%  */
  --cyte-blue-15:     #D6D7EC;   /* 15% — border default */
  --cyte-blue-25:     #C2C5E3;   /* 25% — border emphasis / strip */
  --cyte-blue-50t:    #858BC7;   /* 50% */
  /* Legacy aliases for existing components */
  --cyte-blue-50:     #F3F3F9;
  --cyte-blue-100:    #D6D7EC;
  --cyte-blue-200:    #C2C5E3;
  --cyte-blue-300:    #858BC7;
  --cyte-blue-400:    #4653AA;
  --cyte-blue-500:    #1E2B9F;
  --cyte-blue-600:    #0B188F;   /* = --cyte-blue */
  --cyte-blue-700:    #091478;
  --cyte-blue-800:    #060E55;
  --cyte-blue-900:    #040934;

  /* Green ramp — opacity-derived (tints of #3FAB24 on white) */
  --cyte-green-5:     #F5FBF4;
  --cyte-green-15:    #E2F2DE;
  --cyte-green-25:    #CFEAC8;
  --cyte-green-50t:   #9FD591;
  --cyte-green-50:    #F5FBF4;
  --cyte-green-100:   #E2F2DE;
  --cyte-green-200:   #CFEAC8;
  --cyte-green-300:   #9FD591;
  --cyte-green-400:   #6FC059;
  --cyte-green-500:   #3FAB24;   /* = --cyte-green */
  --cyte-green-600:   #358F1E;
  --cyte-green-700:   #286D17;
  --cyte-green-800:   #1C4E10;
  --cyte-green-900:   #102E09;

  /* Opacity utilities — spec: primary blue at 15% / 25% borders & strips */
  --cyte-blue-a05:    rgba(11, 24, 143, 0.05);
  --cyte-blue-a08:    rgba(11, 24, 143, 0.08);
  --cyte-blue-a15:    rgba(11, 24, 143, 0.15);   /* border — default */
  --cyte-blue-a25:    rgba(11, 24, 143, 0.25);   /* border — emphasis */
  --cyte-blue-a50:    rgba(11, 24, 143, 0.50);
  --cyte-green-a05:   rgba(63, 171, 36, 0.05);
  --cyte-green-a08:   rgba(63, 171, 36, 0.08);
  --cyte-green-a15:   rgba(63, 171, 36, 0.15);
  --cyte-green-a25:   rgba(63, 171, 36, 0.25);
  --cyte-green-a50:   rgba(63, 171, 36, 0.50);

  /* ===== NEUTRALS ===== */
  --neutral-0:        #FFFFFF;
  --neutral-50:       #F7F8FB;
  --neutral-100:      #EEF0F4;
  --neutral-200:      #DDE1E8;
  --neutral-300:      #C4C9D3;
  --neutral-400:      #9AA1AE;
  --neutral-500:      #6B7280;
  --neutral-600:      #4B5263;
  --neutral-700:      #323849;
  --neutral-800:      #1F2433;
  --neutral-900:      #0E1220;

  /* ===== SEMANTIC / STATUS ===== */
  /* Per spec: alert surfaces are near-white tints; text + icon carry the color */
  --info:             #0B188F;      /* primary blue */
  --info-bg:          #F2F3F9;      /* 5% of primary */
  --info-border:      var(--cyte-blue-a15);

  --success:          #65AD46;
  --success-bg:       #F7FBF5;
  --success-border:   rgba(101, 173, 70, 0.25);

  --warning:          #E6AD3E;
  --warning-bg:       #FDF8ED;
  --warning-border:   rgba(230, 173, 62, 0.25);

  --danger:           #FF564E;
  --danger-bg:        #FFF6F6;
  --danger-border:   rgba(255, 86, 78, 0.25);

  /* Risk-rating scale (investment grade → default) */
  --risk-aaa:         #0F6B3E;   /* deep green */
  --risk-aa:          #2D8A3A;
  --risk-a:           #6BB03A;
  --risk-bbb:         #A9C734;
  --risk-bb:          #E4B13A;
  --risk-b:           #E08A2A;
  --risk-ccc:         #D66128;
  --risk-cc:          #BF3A28;
  --risk-c:           #932025;
  --risk-d:           #5C1418;   /* default */

  /* ===== SURFACES (light theme — default) ===== */
  --bg:               var(--neutral-50);
  --bg-raised:        var(--neutral-0);
  --bg-sunken:        var(--neutral-100);
  --bg-inverse:       var(--cyte-blue-900);

  /* ===== FOREGROUND ===== */
  --fg:               var(--neutral-900);      /* primary text */
  --fg-muted:         var(--neutral-600);      /* secondary text */
  --fg-subtle:        var(--neutral-500);      /* tertiary / meta */
  --fg-disabled:      var(--neutral-400);
  --fg-on-brand:      var(--neutral-0);        /* text on blue/green */
  --fg-brand:         var(--cyte-blue);        /* link / brand text */
  --fg-accent:        var(--cyte-green-600);

  /* ===== BORDERS ===== */
  --border:           var(--cyte-blue-a15);    /* default — brand-tinted */
  --border-strong:    var(--cyte-blue-a25);
  --border-subtle:    var(--neutral-200);
  --border-inverse:   rgba(255,255,255,0.18);

  /* Heading strip — spec: tinted brand strip behind headings */
  --strip-blue:       var(--cyte-blue-a15);
  --strip-green:      var(--cyte-green-a15);

  /* ===== TYPOGRAPHY FAMILIES ===== */
  --font-heading:     "Decimal", "Source Sans 3", system-ui, -apple-system, sans-serif;
  --font-body:        "Source Sans 3", "Source Sans Pro", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:        "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ===== TYPE SCALE (modular 1.200) ===== */
  --fs-xs:            12px;
  --fs-sm:            13px;
  --fs-base:          15px;   /* body default */
  --fs-md:            17px;
  --fs-lg:            20px;
  --fs-xl:            24px;
  --fs-2xl:           30px;
  --fs-3xl:           38px;
  --fs-4xl:           48px;
  --fs-5xl:           64px;

  /* Line heights */
  --lh-tight:         1.1;
  --lh-snug:          1.25;
  --lh-normal:        1.5;
  --lh-relaxed:       1.65;

  /* Letter spacing */
  --tracking-tight:   -0.02em;
  --tracking-snug:    -0.01em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.08em;     /* eyebrow / label caps */

  /* Weights */
  --fw-light:         300;
  --fw-regular:       400;
  --fw-medium:        500;
  --fw-semibold:      600;
  --fw-bold:          700;
  --fw-black:         900;

  /* ===== SPACING (4px base) ===== */
  --sp-0:             0;
  --sp-1:             4px;
  --sp-2:             8px;
  --sp-3:             12px;
  --sp-4:             16px;
  --sp-5:             20px;
  --sp-6:             24px;
  --sp-7:             32px;
  --sp-8:             40px;
  --sp-9:             48px;
  --sp-10:            64px;
  --sp-11:            80px;
  --sp-12:            96px;

  /* ===== RADII ===== */
  --r-xs:             2px;
  --r-sm:             4px;   /* Angular Material default */
  --r-md:             6px;
  --r-lg:             8px;
  --r-xl:             12px;
  --r-2xl:            16px;
  --r-full:           9999px;

  /* ===== SHADOWS (Material-influenced, low-chroma blue cast) ===== */
  --shadow-0:         none;
  --shadow-1:         0 1px 2px rgba(11,24,143,0.06), 0 1px 1px rgba(11,24,143,0.04);
  --shadow-2:         0 2px 4px rgba(11,24,143,0.06), 0 2px 8px rgba(11,24,143,0.06);
  --shadow-3:         0 4px 8px rgba(11,24,143,0.08), 0 8px 24px rgba(11,24,143,0.08);
  --shadow-4:         0 8px 16px rgba(11,24,143,0.10), 0 16px 40px rgba(11,24,143,0.12);
  --shadow-focus:     0 0 0 3px var(--cyte-blue-a25);
  --shadow-focus-green: 0 0 0 3px var(--cyte-green-a25);

  /* ===== MOTION (Angular Material standard easings) ===== */
  --ease-standard:    cubic-bezier(0.2, 0, 0, 1);       /* material standard */
  --ease-decelerate:  cubic-bezier(0, 0, 0, 1);
  --ease-accelerate:  cubic-bezier(0.3, 0, 1, 1);
  --dur-1:            120ms;
  --dur-2:            200ms;
  --dur-3:            280ms;
  --dur-4:            400ms;

  /* ===== LAYOUT ===== */
  --container:        1200px;
  --container-wide:   1440px;
  --page-px:          clamp(16px, 4vw, 48px);
  --header-h:         64px;
  --sidebar-w:        248px;
  --z-nav:            50;
  --z-overlay:        100;
  --z-toast:          200;
}

/* ============================================================
   SEMANTIC TYPE ROLES — apply with class OR extend in components
   ============================================================ */
.cyte-body,
body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--fg);
  background: var(--bg);
  font-feature-settings: "ss01", "cv11"; /* stylistic defaults if available */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Display — hero & page-leading statements */
.cyte-display-1 {
  font-family: var(--font-heading);
  font-weight: var(--fw-medium);
  font-size: var(--fs-5xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}
.cyte-display-2 {
  font-family: var(--font-heading);
  font-weight: var(--fw-medium);
  font-size: var(--fs-4xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
}

/* Headings — Decimal, section heads */
.cyte-h1, h1 {
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-3xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg);
}
.cyte-h2, h2 {
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
}
.cyte-h3, h3 {
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
}
.cyte-h4, h4 {
  font-family: var(--font-heading);
  font-weight: var(--fw-medium);
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
}
.cyte-h5, h5 {
  font-family: var(--font-body);       /* smaller headings drop to body face */
  font-weight: var(--fw-semibold);
  font-size: var(--fs-md);
  line-height: var(--lh-snug);
}

/* Heading-strip: the signature "tinted band behind a heading" motif */
.cyte-strip-heading {
  display: inline-block;
  padding: 4px 10px;
  background: var(--strip-blue);
  color: var(--cyte-blue-700);
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  border-radius: var(--r-sm);
}
.cyte-strip-heading--green {
  background: var(--strip-green);
  color: var(--cyte-green-700);
}

/* Body text */
.cyte-body-lg,
p.lg {
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: var(--fg);
}
.cyte-body, p {
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--fg);
}
.cyte-body-sm {
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}

/* Meta — micro-copy, captions, legal */
.cyte-meta {
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
  color: var(--fg-subtle);
  letter-spacing: var(--tracking-wide);
}

/* Eyebrow — all-caps label above a heading */
.cyte-eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--fg-accent);
}

/* Link */
.cyte-link, a {
  color: var(--fg-brand);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--cyte-blue-a25);
  transition: text-decoration-color var(--dur-1) var(--ease-standard);
}
.cyte-link:hover, a:hover {
  text-decoration-color: currentColor;
}

/* Code / mono */
.cyte-code, code, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--neutral-100);
  padding: 0.1em 0.35em;
  border-radius: var(--r-xs);
  color: var(--cyte-blue-700);
}

/* Numeric — tabular figures for tables, rates, ratios */
.cyte-num {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum", "lnum";
}

/* Material-symbols default settings */
.material-symbols-rounded {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
  user-select: none;
}