/* ============================================================
   II Increments Sans — @font-face declarations
   Consumed by tokens.css: --font-family-default: 'II_Increments_Sans', sans-serif
   ============================================================ */

@font-face {
  font-family: 'II_Increments_Sans';
  src: url(https://code-components.website-files.com/6ab67cd03256ae2be2c95462%2Fmodule%2F4c8d6b0777d6283b39a7-IIIncrementsSans.woff) format('woff');
  font-weight: 400;
  font-style:  normal;
  font-display: swap;
}

@font-face {
  font-family: 'II_Increments_Sans';
  src: url(https://code-components.website-files.com/6ab67cd03256ae2be2c95462%2Fmodule%2Ffeb94ee4d045b58d4f47-IIIncrementsSans-Oblique.woff) format('woff');
  font-weight: 400;
  font-style:  oblique;
  font-display: swap;
}

@font-face {
  font-family: 'II_Increments_Sans';
  src: url(https://code-components.website-files.com/6ab67cd03256ae2be2c95462%2Fmodule%2Faf1156dc19304abe79a1-IIIncrementsSans-Light.woff) format('woff');
  font-weight: 300;
  font-style:  normal;
  font-display: swap;
}

@font-face {
  font-family: 'II_Increments_Sans';
  src: url(https://code-components.website-files.com/6ab67cd03256ae2be2c95462%2Fmodule%2Fe77d91b6d691bc6e0659-IIIncrementsSans-LightOblique.woff) format('woff');
  font-weight: 300;
  font-style:  oblique;
  font-display: swap;
}

@font-face {
  font-family: 'II_Increments_Sans';
  src: url(https://code-components.website-files.com/6ab67cd03256ae2be2c95462%2Fmodule%2F8ee9be7dacfcee6437f9-IIIncrementsSans-Medium.woff) format('woff');
  font-weight: 500;
  font-style:  normal;
  font-display: swap;
}

@font-face {
  font-family: 'II_Increments_Sans';
  src: url(https://code-components.website-files.com/6ab67cd03256ae2be2c95462%2Fmodule%2F3f09afa00933629714de-IIIncrementsSans-MediumOblique.woff) format('woff');
  font-weight: 500;
  font-style:  oblique;
  font-display: swap;
}

@font-face {
  font-family: 'II_Increments_Sans';
  src: url(https://code-components.website-files.com/6ab67cd03256ae2be2c95462%2Fmodule%2F183b320a24faf3fcf6ac-IIIncrementsSans-Bold.woff) format('woff');
  font-weight: 700;
  font-style:  normal;
  font-display: swap;
}

@font-face {
  font-family: 'II_Increments_Sans';
  src: url(https://code-components.website-files.com/6ab67cd03256ae2be2c95462%2Fmodule%2Fb13c2116423b5be5de32-IIIncrementsSans-BoldOblique.woff) format('woff');
  font-weight: 700;
  font-style:  oblique;
  font-display: swap;
}

@font-face {
  font-family: 'II_Increments_Sans';
  src: url(https://code-components.website-files.com/6ab67cd03256ae2be2c95462%2Fmodule%2F141ae100a83813a91bfc-IIIncrementsSans-Black.woff) format('woff');
  font-weight: 900;
  font-style:  normal;
  font-display: swap;
}

@font-face {
  font-family: 'II_Increments_Sans';
  src: url(https://code-components.website-files.com/6ab67cd03256ae2be2c95462%2Fmodule%2F8dae7b1fce219526382a-IIIncrementsSans-BlackOblique.woff) format('woff');
  font-weight: 900;
  font-style:  oblique;
  font-display: swap;
}


/* ============================================================
   Rowan — the display serif for the Data Report LP.

   Consumed via `--dr-font-display` in
   src/components/sections/pages/data-report/data-report.css.

   Served as .woff2 (converted from the supplied .otf originals, which are
   kept alongside as the source files — roughly half the bytes over the wire).

   NOTE ON THE ITALICS: the supplied files each declare themselves as their
   OWN family ("Rowan Light Italic", style "Regular", fsSelection italic bit
   unset) rather than as the italic member of one family. The `@font-face`
   descriptors below are what map all four onto a single `Rowan` family with
   the right weight/style axes — which is also what stops the browser
   synthesizing a fake oblique from the upright Light when it meets
   `font-style: italic`.

   Semibold (600) is declared but not used by the Data Report design; it costs
   nothing until something asks for it, and having it declared prevents
   synthetic bolding.

   ALSO UPLOADED TO WEBFLOW as site custom fonts (family "Rowan"), on the
   PRODUCTION site 5b15ca3d02dd414c89ecc3ed — not the `siteId` in
   `webflow.json`; see docs/figma-asset-pipeline.md. That copy is what makes
   Rowan selectable on NATIVE Webflow elements in the Designer. The code
   components keep using the local files above, exactly as II Increments Sans
   does (it is likewise both local here and a Webflow custom font). Do not
   repoint these @font-face rules at the CDN — the local copy is what the
   devlink bundle ships.

     Light 300         6ab6717a25fdee0096b769ca
     Light Italic 300  6ab6717afd94da6362627c8b
     Semibold 600      6ab6717a5c19d6944e8f627e
     Semibold It. 600  6ab6717a3956581827b7b5a4

   URLs: https://cdn.prod.website-files.com/5b15ca3d02dd414c89ecc3ed/fonts/<id>-<Name>.woff2
   ============================================================ */

@font-face {
  font-family: 'Rowan';
  src: url(https://code-components.website-files.com/6ab67cd03256ae2be2c95462%2Fmodule%2F5ccd01330e5747f1c61a-Rowan-Light.woff2) format('woff2');
  font-weight: 300;
  font-style:  normal;
  font-display: swap;
}

@font-face {
  font-family: 'Rowan';
  src: url(https://code-components.website-files.com/6ab67cd03256ae2be2c95462%2Fmodule%2F1957cad7b86be83135b0-Rowan-LightItalic.woff2) format('woff2');
  font-weight: 300;
  font-style:  italic;
  font-display: swap;
}

@font-face {
  font-family: 'Rowan';
  src: url(https://code-components.website-files.com/6ab67cd03256ae2be2c95462%2Fmodule%2Fc56c2f6bcc7791d13357-Rowan-Semibold.woff2) format('woff2');
  font-weight: 600;
  font-style:  normal;
  font-display: swap;
}

@font-face {
  font-family: 'Rowan';
  src: url(https://code-components.website-files.com/6ab67cd03256ae2be2c95462%2Fmodule%2F4dcc5fef8865b1fcaa90-Rowan-SemiboldItalic.woff2) format('woff2');
  font-weight: 600;
  font-style:  italic;
  font-display: swap;
}

/* ============================================================
   CSS Reset — extracted from Tailwind v4 Preflight
   Replaces output.css; no utility classes, no @layer wrappers.
   ============================================================ */

*, ::after, ::before, ::backdrop, ::file-selector-button {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0 solid;
}

html, :host {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
  -webkit-tap-highlight-color: transparent;
}

hr {
  height: 0;
  color: inherit;
  border-top-width: 1px;
}

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
}

h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: inherit;
}

a {
  color: inherit;
  -webkit-text-decoration: inherit;
  text-decoration: inherit;
}

b, strong {
  font-weight: bolder;
}

small {
  font-size: 80%;
}

sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub { bottom: -0.25em; }
sup { top: -0.5em; }

table {
  text-indent: 0;
  border-color: inherit;
  border-collapse: collapse;
}

progress { vertical-align: baseline; }
summary  { display: list-item; }

ol, ul, menu {
  list-style: none;
}

img, svg, video, canvas, audio, iframe, embed, object {
  display: block;
  vertical-align: middle;
}

img, video {
  max-width: 100%;
  height: auto;
}

button, input, select, optgroup, textarea, ::file-selector-button {
  font: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  letter-spacing: inherit;
  color: inherit;
  border-radius: 0;
  background-color: transparent;
  opacity: 1;
}

:where(select:is([multiple], [size])) optgroup        { font-weight: bolder; }
:where(select:is([multiple], [size])) optgroup option { padding-inline-start: 20px; }

::file-selector-button { margin-inline-end: 4px; }

::placeholder { opacity: 1; }

@supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {
  ::placeholder {
    color: currentcolor;
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, currentcolor 50%, transparent);
    }
  }
}

textarea { resize: vertical; }

::-webkit-search-decoration                { -webkit-appearance: none; }
::-webkit-date-and-time-value              { min-height: 1lh; text-align: inherit; }
::-webkit-datetime-edit                    { display: inline-flex; }
::-webkit-datetime-edit-fields-wrapper     { padding: 0; }

::-webkit-datetime-edit,
::-webkit-datetime-edit-year-field,
::-webkit-datetime-edit-month-field,
::-webkit-datetime-edit-day-field,
::-webkit-datetime-edit-hour-field,
::-webkit-datetime-edit-minute-field,
::-webkit-datetime-edit-second-field,
::-webkit-datetime-edit-millisecond-field,
::-webkit-datetime-edit-meridiem-field     { padding-block: 0; }

::-webkit-calendar-picker-indicator        { line-height: 1; }
:-moz-focusring                            { outline: auto; }
:-moz-ui-invalid                           { box-shadow: none; }

button,
input:where([type="button"], [type="reset"], [type="submit"]),
::file-selector-button                     { appearance: button; }

::-webkit-inner-spin-button,
::-webkit-outer-spin-button                { height: auto; }

[hidden]:where(:not([hidden="until-found"])) { display: none !important; }

/* ============================================================
   Primitive tokens — generated from Figma Tailwind + Smith.ai exports.
   DO NOT EDIT MANUALLY. To regenerate: npm run gen:tokens
   ============================================================ */

:host {
  /* Brand-neutral */
  --color-brand-neutral-50 : #FAFAF7;
  --color-brand-neutral-100: #F5F5F3;
  --color-brand-neutral-200: #E7E7E2;
  --color-brand-neutral-300: #D6D6CD;
  --color-brand-neutral-400: #A8A8A0;
  --color-brand-neutral-500: #85857A;
  --color-brand-neutral-600: #65655D;
  --color-brand-neutral-700: #4D4D47;
  --color-brand-neutral-800: #3A3A36;
  --color-brand-neutral-900: #282825;
  --color-brand-neutral-950: #1A1A18;

  /* Brand-beige */
  --color-brand-beige-50 : #FAF6F0;
  --color-brand-beige-100: #F5F0E7;
  --color-brand-beige-200: #E5DFD5;
  --color-brand-beige-300: #D6CFC2;
  --color-brand-beige-400: #C3BBAC;
  --color-brand-beige-500: #C2B69F;
  --color-brand-beige-600: #907F60;
  --color-brand-beige-700: #6C6251;
  --color-brand-beige-800: #4D422E;
  --color-brand-beige-900: #282115;
  --color-brand-beige-950: #1A150D;

  /* Brand-blue */
  --color-brand-blue-50 : #EBFAFF;
  --color-brand-blue-100: #D1EFFA;
  --color-brand-blue-200: #A8DDF0;
  --color-brand-blue-300: #7ECBE7;
  --color-brand-blue-400: #59B7D9;
  --color-brand-blue-500: #33A3CC;
  --color-brand-blue-600: #2684A6;
  --color-brand-blue-700: #186581;
  --color-brand-blue-800: #0F4457;
  --color-brand-blue-900: #083545;
  --color-brand-blue-950: #05232E;

  /* Brand-orange */
  --color-brand-orange-50 : #FFF0EB;
  --color-brand-orange-100: #FCE2D9;
  --color-brand-orange-200: #F8B7A0;
  --color-brand-orange-300: #F4855D;
  --color-brand-orange-400: #F0612D;
  --color-brand-orange-500: #C64110;
  --color-brand-orange-600: #A0340D;
  --color-brand-orange-700: #712509;
  --color-brand-orange-800: #4B1906;
  --color-brand-orange-900: #260C03;
  --color-brand-orange-950: #1A0802;

  /* Typography scale */
  --font-size-h1   : 2.25rem;
  --font-size-h2   : 1.875rem;
  --font-size-h3   : 1.5rem;
  --font-size-h4   : 1.25rem;
  --font-size-body : 1rem;
  --font-size-lead : 1.25rem;
  --font-size-large: 1.125rem;

  /* Shadow scale */
  --shadow-2xs: 0px 1px 3px 0px #1A1A1808;
  --shadow-xs : 0px 1px 3px 0px #1A1A1808;
  --shadow-2xl: 0px 1px 3px 0px #1A1A1821;
  --shadow-sm : 0px 1px 3px 0px #1A1A180D, 0px 1px 2px -1px #1A1A180D;
  --shadow-md : 0px 1px 3px 0px #1A1A180D, 0px 2px 4px -1px #1A1A180D;
  --shadow-lg : 0px 1px 3px 0px #1A1A180D, 0px 4px 6px -1px #1A1A180D;
  --shadow-xl : 0px 1px 3px 0px #1A1A180D, 0px 8px 10px -1px #1A1A180D;

}

/* ============================================================
   Semantic color tokens — generated from Figma Mode + Smith.ai exports.
   DO NOT EDIT MANUALLY. To regenerate: npm run gen:tokens
   ============================================================ */

:host {
  --brand-neutral-700     : #4D4D47;
  --extra-transparent     : #FFFFFF00;
  --extra-backdrop-overlay: #3C3A4099;
  --extra-shadow-color    : #0000001A;
  --muted-foreground-card : #A8A8A0;
  --opacity-accent-10     : #FFFFFF1A;
  --opacity-accent-20     : #FFFFFF33;
  --opacity-accent-30     : #FFFFFF4D;
  --opacity-accent-40     : #FFFFFF66;
  --opacity-accent-50     : #FFFFFF80;
  --opacity-success-10    : #16A34A1A;
  --opacity-success-20    : #16A34A33;
  --opacity-success-30    : #16A34A4D;
  --opacity-success-40    : #16A34A66;
  --opacity-success-50    : #16A34A80;
  --opacity-info-10       : #59B7D91A;
  --opacity-info-20       : #59B7D933;
  --opacity-info-30       : #59B7D94D;
  --opacity-info-40       : #59B7D966;
  --opacity-info-50       : #59B7D980;
  --opacity-warning-10    : #E392191A;
  --opacity-warning-20    : #D9770633;
  --opacity-warning-30    : #D977064D;
  --opacity-warning-40    : #D9770666;
  --opacity-warning-50    : #D9770680;
  --opacity-error-10      : #E034341A;
  --opacity-error-20      : #E0343433;
  --opacity-error-30      : #E034344D;
  --opacity-error-40      : #E0343466;
  --opacity-error-50      : #E0343480;
  --opacity-neutral-10    : #2828251A;
  --opacity-neutral-20    : #28282533;
  --opacity-neutral-30    : #2828254D;
  --opacity-neutral-40    : #28282566;
  --opacity-neutral-50    : #28282580;
}


:host,
[data-scheme="light"] {
  --background                : #F5F0E7;
  --foreground                : #282825;
  --card                      : #FFFFFF;
  --card-foreground           : #282825;
  --popover                   : #F5F0E7;
  --popover-foreground        : #3A3A36;
  --primary                   : #C64110;
  --primary-foreground        : #F5F0E7;
  --secondary                 : #FAF6F0;
  --secondary-foreground      : #3A3A36;
  --muted                     : #E5DFD5;
  --muted-foreground          : #85857A;
  --accent                    : #FAF6F0;
  --accent-foreground         : #282825;
  --destructive               : #EF4444;
  --info                      : #59B7D9;
  --success                   : #16A34A;
  --warning                   : #D97706;
  --border                    : #D6CFC2;
  --input                     : #D6CFC2;
  --ring                      : #59B7D9;
  --chart-1                   : #F0612D;
  --chart-2                   : #59B7D9;
  --chart-3                   : #6366F1;
  --chart-4                   : #10B981;
  --chart-5                   : #EAB308;
  --sidebar                   : #E5DFD5;
  --sidebar-foreground        : #4D4D47;
  --sidebar-primary           : #F0612D;
  --sidebar-primary-foreground: #F5F0E7;
  --sidebar-accent            : #FAF6F0;
  --sidebar-accent-foreground : #1A1A18;
  --sidebar-border            : #D6CFC2;
  --sidebar-ring              : #3A3A36;
  --extra-muted-foreground    : #D6CFC2;
  --opacity-primary-10        : #C641101A;
  --opacity-primary-20        : #C6411033;
  --opacity-primary-30        : #C641104D;
  --opacity-primary-40        : #C6411066;
  --opacity-primary-50        : #C6411080;
  --opacity-secondary-10      : #FAF6F01A;
  --opacity-secondary-20      : #FAF6F033;
  --opacity-secondary-30      : #FAF6F04D;
  --opacity-secondary-40      : #FAF6F066;
  --opacity-secondary-50      : #FAF6F080;
  --divider: #D6CFC2;
}

[data-scheme="dark"] {
  --background                : #1A1A18;
  --foreground                : #F5F0E7;
  --card                      : #282825;
  --card-foreground           : #F5F0E7;
  --popover                   : #282825;
  --popover-foreground        : #FAF6F0;
  --primary                   : #F0612D;
  --primary-foreground        : #FAF6F0;
  --secondary                 : #1A1A18;
  --secondary-foreground      : #FAF6F0;
  --muted                     : #3A3A36;
  --muted-foreground          : #65655D;
  --accent                    : #3A3A36;
  --accent-foreground         : #FAF6F0;
  --destructive               : #DC2626;
  --info                      : #7ECBE7;
  --success                   : #16A34A;
  --warning                   : #D97706;
  --border                    : #3A3A36;
  --input                     : #3A3A36;
  --ring                      : #7ECBE7;
  --chart-1                   : #C64110;
  --chart-2                   : #7ECBE7;
  --chart-3                   : #818CF8;
  --chart-4                   : #6EE7B7;
  --chart-5                   : #FACC15;
  --sidebar                   : #000000;
  --sidebar-foreground        : #85857A;
  --sidebar-primary           : #C64110;
  --sidebar-primary-foreground: #FAF6F0;
  --sidebar-accent            : #282825;
  --sidebar-accent-foreground : #FFFFFF;
  --sidebar-border            : #282825;
  --sidebar-ring              : #65655D;
  --extra-muted-foreground    : #4D4D47;
  --opacity-primary-10        : #F0612D1A;
  --opacity-primary-20        : #F0612D33;
  --opacity-primary-30        : #F0612D4D;
  --opacity-primary-40        : #F0612D66;
  --opacity-primary-50        : #F0612D80;
  --opacity-secondary-10      : #2828251A;
  --opacity-secondary-20      : #28282533;
  --opacity-secondary-30      : #2828254D;
  --opacity-secondary-40      : #28282566;
  --opacity-secondary-50      : #28282580;
  --divider: #3A3A36;
}

/* ============================================================
   Responsive layout tokens — generated from Figma Responsive exports.
   Mobile-first: :root = mobile defaults; overridden at tablet (768px)
   and web (1280px) via media queries.
   DO NOT EDIT MANUALLY. To regenerate: npm run gen:tokens
   ============================================================ */

/* Mobile defaults */
:host {
  --layout-screen-size        : 360px;
  --layout-vertical-padding   : 32px;
  --layout-horizontal-padding : 16px;
  --layout-heading-size       : 24px;
  --layout-heading-line-height: 32px;
  --layout-section-spacing    : 48px;
  --layout-block-width        : 360px;
}

/* Tablet (≥768px) */
@media (min-width: 768px) {
  :host {
    --layout-screen-size        : 768px;
    --layout-vertical-padding   : 64px;
    --layout-horizontal-padding : 24px;
    --layout-heading-size       : 30px;
    --layout-heading-line-height: 36px;
    --layout-section-spacing    : 64px;
    --layout-block-width        : 768px;
  }
}

/* Web (≥1280px) */
@media (min-width: 1280px) {
  :host {
    --layout-screen-size        : 1280px;
    --layout-vertical-padding   : 96px;
    --layout-horizontal-padding : 32px;
    --layout-heading-size       : 36px;
    --layout-heading-line-height: 40px;
    --layout-section-spacing    : 96px;
    --layout-block-width        : 1440px;
  }
}

/* ============================================================
   Design Tokens
   Global CSS custom properties for color, typography, spacing,
   border-radius, and shadow. Import this file at the app or
   Storybook entry level so all components can consume the vars.

   Layer 1 — Primitives (brand palette + type scale): tokens/primitives.css  [generated]
   Layer 2 — Semantic colors + opacity scale:         tokens/colors.css       [generated]
   Layer 3 — Responsive layout vars:                  tokens/responsive.css   [generated]
   Layer 4 — Manual supplements below                 (not yet in Figma)
   ============================================================ */


/* ----------------------------------------------------------
   Manual Color Supplements — Light
   Tokens not (yet) exported from Figma; kept here manually.
   ---------------------------------------------------------- */
:host,
[data-scheme="light"] {

  /* Inverse-scheme tokens — exact values from the DARK scheme, used by
     components that intentionally render with the opposite scheme's colors
     (e.g. the XS dropdown popup shows dark-on-light-card). */
  --inv-popover:            #282825;  /* = dark --popover            */
  --inv-popover-foreground: #FAF9F0;  /* = dark --popover-foreground */
  --inv-accent:             #3A3A36;  /* = dark --accent             */

  --destructive-foreground: #FEF2F2;
  --info-foreground:        #ECFEFF;
  --success-foreground:     #F0FDF4;
  --warning-foreground:     #FFFDF5;

  /* Opacity vars not in Figma exports */
  --opacity-background-10: #F5F0E71A;
  --opacity-background-20: #F5F0E733;
  --opacity-background-30: #F5F0E74D;
  --opacity-background-40: #F5F0E766;
  --opacity-background-50: #F5F0E780;

  --opacity-inv-accent-10: #3A3A361A;
  --opacity-inv-accent-20: #3A3A3633;
  --opacity-inv-accent-30: #3A3A364D;
  --opacity-inv-accent-40: #3A3A3666;
  --opacity-inv-accent-50: #3A3A3680;

  --opacity-background-60:    #F5F0E799;
  --opacity-destructive-10:   #EF44441A;

}


/* ----------------------------------------------------------
   Manual Color Supplements — Dark
   ---------------------------------------------------------- */
[data-scheme="dark"] {

  /* Inverse-scheme tokens — exact values from the LIGHT scheme, used by
     components that intentionally render with the opposite scheme's colors
     (e.g. the XS dropdown popup shows light-on-dark-card). */
  --inv-popover:            #F7F5E8;  /* = light --popover            */
  --inv-popover-foreground: #3A3A36;  /* = light --popover-foreground */
  --inv-accent:             #FAF6F0;  /* = light --accent             */

  --destructive-foreground: #FEF2F2;
  --info-foreground:        #ECFEFF;
  --success-foreground:     #F0FDF4;
  --warning-foreground:     #FFFDF5;

  /* Opacity vars not in Figma exports */
  --opacity-background-10: #1A1A181A;
  --opacity-background-20: #1A1A1833;
  --opacity-background-30: #1A1A184D;
  --opacity-background-40: #1A1A1866;
  --opacity-background-50: #1A1A1880;

  --opacity-inv-accent-10: #FAF6F01A;
  --opacity-inv-accent-20: #FAF6F033;
  --opacity-inv-accent-30: #FAF6F04D;
  --opacity-inv-accent-40: #FAF6F066;
  --opacity-inv-accent-50: #FAF6F080;

  --opacity-background-60:    #1A1A1899;
  --opacity-destructive-10:   #DC26261A;

}


/* ----------------------------------------------------------
   Typography Tokens
   ---------------------------------------------------------- */
:host {
  --font-family-fallback: "II_Increments_Sans", "Iiincrementssans", sans-serif;
   --font-family-default:   var(--_typography---fonts--font-main, var(--font-family-fallback));

  --font-size-xs:   0.75rem;    /* 12px */
  --font-size-sm:   0.875rem;   /* 14px */
  --font-size-base: 1rem;       /* 16px */
  --font-size-lg:   1.125rem;   /* 18px */
  --font-size-xl:   1.25rem;    /* 20px */
  --font-size-2xl:  1.5rem;     /* 24px */
  --font-size-3xl:  1.875rem;   /* 30px */

  --font-weight-light:   300;
  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-bold:    700;

  --line-height-xs:   1rem;     /* 16px */
  --line-height-sm:   1.25rem;  /* 20px */
  --line-height-base: 1.5rem;   /* 24px */
  --line-height-lg:   1.75rem;  /* 28px */
  --line-height-xl:   1.75rem;  /* 28px */
  --line-height-2xl:  2rem;     /* 32px */
  --line-height-3xl:  2.25rem;  /* 36px */
}


/* ----------------------------------------------------------
   Border Radius Tokens
   ---------------------------------------------------------- */
:host {
  --radius-sm:   0.5rem;    /*  8px — rounded-lg  in Figma */
  --radius-md:   1rem;      /* 16px — rounded-2xl in Figma */
  --radius-lg:   1.5rem;    /* 24px — rounded-3xl in Figma */
  --radius-full: 9999px;    /* pill / fully rounded         */
}


/* ----------------------------------------------------------
   Spacing Tokens
   ---------------------------------------------------------- */
:host {
  --spacing-0:   0px;
  --spacing-px:  1px;
  --spacing-1:   0.25rem;   /*  4px */
  --spacing-1-5: 0.375rem;  /*  6px */
  --spacing-2:   0.5rem;    /*  8px */
  --spacing-3:   0.75rem;   /* 12px */
  --spacing-4:   1rem;      /* 16px */
  --spacing-5:   1.25rem;   /* 20px */
  --spacing-6:   1.5rem;    /* 24px */
  --spacing-7:   1.75rem;   /* 28px */
   --spacing-8:   2rem;      /* 32px */
   --spacing-9:   2.25rem;   /* 36px */
}


/* ----------------------------------------------------------
   Font Weight Utilities
   ---------------------------------------------------------- */

.fw-light   { font-weight: var(--font-weight-light);   }
.fw-regular { font-weight: var(--font-weight-regular); }
.fw-medium  { font-weight: var(--font-weight-medium);  }
.fw-bold    { font-weight: var(--font-weight-bold);    }