/* ============================================================
   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/6a2c96321a6ae1c120266892%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/6a2c96321a6ae1c120266892%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/6a2c96321a6ae1c120266892%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/6a2c96321a6ae1c120266892%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/6a2c96321a6ae1c120266892%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/6a2c96321a6ae1c120266892%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/6a2c96321a6ae1c120266892%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/6a2c96321a6ae1c120266892%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/6a2c96321a6ae1c120266892%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/6a2c96321a6ae1c120266892%2Fmodule%2F8dae7b1fce219526382a-IIIncrementsSans-BlackOblique.woff) format('woff');
  font-weight: 900;
  font-style:  oblique;
  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-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-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);    }