/* =============================================================
   Parra Client Design System — Foundations
   Source: Klijentska Design system (DS-Foundations-Style-System),
   copied verbatim from the design project's colors_and_type.css.

   These tokens are the only source of colour, spacing and type in
   the application. No component introduces a hex value of its own.
   ============================================================= */

/* ---------- Web fonts ----------
   The system specifies Inter for all UI typography. Biennale is used
   in marketing/heading display contexts; substituted with Inter as a
   close geometric fallback when Biennale is not licensed.

   Served from our own host, not from Google Fonts: the public price
   lists load this file too, and a font from a third party hands every
   visitor's address to it (ARCHITECTURE 12.2). Inter 5.3 variable,
   from @fontsource-variable/inter, SIL Open Font License (fonts/). */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/inter-latin-ext-wght-normal.woff2") format("woff2-variations");
  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: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
  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;
}

:root {
  /* =========================================================
     COLOR TOKENS  (semantic — “Styles” layer in Figma)
     ========================================================= */

  /* Basic — text, icons, surfaces */
  --bs-cta:        #662D91;   /* Brand action — buttons, links */
  --bs-primary:    #FFFFFF;
  --bs-secondary:  #1A1A1A;   /* Primary body text */
  --bs-tertiary:   #4D4D4D;
  --bs-text-icons: #808080;
  --bs-icons-1:    #999999;
  --bs-icons-2:    #B2B2B2;
  --bs-icons-3:    #E5E5E5;

  /* Background */
  --bg-primary:        #F7F7F7;
  --bg-secondary:      rgba(0,0,0,0.05);
  --bg-tertiary:       #CCCCCC;
  --bg-cards:          #FFFFFF;
  --bg-light-brand:    #FDFAFF;
  --bg-light-brand-2:  #F7F2FA;
  --bg-error:          #FDFAFA;
  --bg-success:        #EFF7EE;
  --bg-brand-1:        #470A76;   /* Deep brand */
  --bg-brand-2:        #662D91;   /* Primary brand */
  --bg-brand-3:        #CBA7E7;   /* Light brand wash */

  /* Typography colors */
  --text-primary:    #1A1A1A;
  --text-secondary:  #808080;
  --text-tertiary:   #4D4D4D;
  --text-table:      #999999;
  --text-but-prim:   #FFFFFF;
  --text-but-sec:    #662D91;
  --text-error:      #AB1919;

  /* Dividers & strokes */
  --ds-primary:        rgba(0,0,0,0.10);
  --ds-secondary:      #E5E5E5;
  --ds-table:          #F2F2F2;
  --ds-table-2:        #B2B2B2;
  --ds-active-input:   #470A76;
  --ds-success:        rgba(10,118,34,0.10);
  --ds-primary-brand:  #F7F2FA;

  /* Utilities (status) */
  --success-primary:    #0A7622;
  --success-secondary:  rgba(10,118,34,0.40);
  --error-primary:      #AB1919;
  --error-secondary:    rgba(171,25,25,0.40);
  --error-tertiary:     rgba(171,25,25,0.10);
  --pending-primary:    #E78B2E;
  --pending-secondary:  rgba(139,75,10,0.10);
  --pending-tertiary:   #FDFCFB;

  /* Overlay */
  --ov-modal: rgba(0,0,0,0.50);

  /* Brand gradient — used sparingly for hero / illustrative moments */
  --g-brand: linear-gradient(135deg, #662D91 0%, #1A00FF 100%);
  --g-brand-radial: radial-gradient(circle at 30% 30%, #662D91 0%, #1A00FF 100%);

  /* =========================================================
     EXTENDED PALETTE (tokens layer — for charts, tags, illustrations)
     ========================================================= */
  --neutral-90: #1A1A1A;
  --neutral-80: #333333;
  --neutral-70: #4D4D4D;
  --neutral-60: #666666;
  --neutral-50: #808080;
  --neutral-40: #999999;
  --neutral-30: #B2B2B2;
  --neutral-20: #CCCCCC;
  --neutral-10: #E5E5E5;
  --neutral-05: #F2F2F2;
  --neutral-03: #F7F7F7;

  --primary-50: #662D91;
  --primary-40: #9664BC;
  --primary-20: #CBA7E7;
  --primary-10: #DEB8FC;
  --primary-08: #F1E6FA;
  --primary-05: #F7F2FA;
  --primary-03: #FDFAFF;

  /* Categorical colors (used for tags, account-type cards, charts) */
  --c-orange:   #E78B2E;
  --c-brown:    #76440A;
  --c-teal:     #21A39C;
  --c-yellow:   #B39A1A;
  --c-navy:     #2C2FE6;
  --c-pink:     #E6409C;
  --c-red-opal: #E6544F;
  --c-cyan:     #382DBF;
  --c-brown-crayola:   #B55231;
  --c-yellow-green:    #DFDC4F;

  /* =========================================================
     TYPOGRAPHY  (semantic)
     ========================================================= */
  --font-sans: "Inter", "Biennale", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Inter", "Biennale", system-ui, sans-serif;

  /* =========================================================
     SHADOWS  — exactly the four shadow recipes documented in the DS
     ========================================================= */
  --shadow-dropdown:  0px 4px 8px 0px rgba(0,0,0,0.04);
  --shadow-button:    0px 0px 12px 0px rgba(0,0,0,0.08);
  --shadow-card:      0px 4px 8px 0px rgba(0,0,0,0.04);
  --shadow-tooltip:   0px 0px 16px 0px rgba(0,0,0,0.08), 0px 0px 2px 0px rgba(0,0,0,0.04);

  /* =========================================================
     RADII — from inspection of buttons, sidebar, cards
     ========================================================= */
  --r-xs: 4px;
  --r-sm: 5px;     /* navigation buttons */
  --r-md: 6px;     /* shadow demo cards */
  --r-lg: 8px;     /* sidebar items, swatches, inputs */
  --r-xl: 12px;
  --r-2xl: 16px;
  --r-pill: 999px;

  /* =========================================================
     SPACING SCALE — 4-pt grid (matches Figma frames)
     ========================================================= */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
}

/* =============================================================
   SEMANTIC TYPE STYLES
   (named exactly as in the Figma Typography page)
   ============================================================= */
.t-heading-1, h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 28px;
  line-height: 32px;
  color: var(--text-primary);
  letter-spacing: 0;
}
.t-subheading, h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 24px;
  line-height: 32px;
  color: var(--text-primary);
}
.t-small-title, h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 20px;
  line-height: 24px;
  color: var(--text-primary);
}
.t-normal, p {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 15px;
  line-height: 24px;
  color: var(--text-primary);
}
.t-normal-bold {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 15px;
  line-height: 24px;
  color: var(--text-primary);
}
.t-small {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: var(--text-primary);
}
.t-small-bold {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: var(--text-primary);
}
.t-description {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  color: var(--text-secondary);
}
.t-description-bold {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 12px;
  line-height: 16px;
  color: var(--text-primary);
}
.t-button {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 17px;
  line-height: 24px;
  letter-spacing: 0;
}
.t-button-small {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 13px;
  line-height: 20px;
}

/* =============================================================
   BASE
   ============================================================= */
html, body {
  font-family: var(--font-sans);
  color: var(--text-primary);
  background: var(--bg-cards);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
* { box-sizing: border-box; }