/* Design tokens, transcribed from the Avicenna Figma design system.

   Sources: the `_foundation` collection (Mode 1) for colors, spacing and screens; the grid collection
   (Desktop-xLarge, Tablet, Mobile-Small, Mobile-xSmall) for layout; the typography collection
   (Desktop-Max, Mobile-Min) for type; and the design system pages for radius, icon sizes and
   shadow.

   This file is machine-owned and holds primitives only. It must never contain a selector other than
   :root, so it can be regenerated wholesale when Figma changes. Role decisions -- which blue is
   "primary", which grey is body text -- belong in main.css, not here.

   Figma-only variables are deliberately omitted: `Desktop Version`, `Mobile Version`,
   `mobile-version`, `interactions`, `visible` (prototyping switches) and `frame-size` (an alias of
   `screens`). */
:root {
    /* ---------- Colors: white ---------- */
    --white: #fff;
    --white-80: rgb(255 255 255 / 80%);
    --white-64: rgb(255 255 255 / 64%);
    --white-48: rgb(255 255 255 / 48%);
    --white-40: rgb(255 255 255 / 40%);
    --white-32: rgb(255 255 255 / 32%);
    --white-20: rgb(255 255 255 / 20%);
    --white-16: rgb(255 255 255 / 16%);
    --white-12: rgb(255 255 255 / 12%);
    --white-08: rgb(255 255 255 / 8%);
    --white-04: rgb(255 255 255 / 4%);
    --white-0: rgb(255 255 255 / 0%);

    /* ---------- Colors: black ---------- */
    --black: #000;
    --black-80: rgb(0 0 0 / 80%);
    --black-64: rgb(0 0 0 / 64%);
    --black-48: rgb(0 0 0 / 48%);
    --black-40: rgb(0 0 0 / 40%);
    --black-32: rgb(0 0 0 / 32%);
    --black-20: rgb(0 0 0 / 20%);
    --black-16: rgb(0 0 0 / 16%);
    --black-12: rgb(0 0 0 / 12%);
    --black-08: rgb(0 0 0 / 8%);
    --black-04: rgb(0 0 0 / 4%);
    --black-0: rgb(0 0 0 / 0%);

    /* ---------- Colors: brand / blue ---------- */
    --brand-blue-50: #eaf1fd;
    --brand-blue-100: #cddcfa;
    --brand-blue-200: #a4bff7;
    --brand-blue-300: #7ea2f2;
    --brand-blue-400: #4776e9;
    --brand-blue-500: #1f4edb;
    --brand-blue-600: #1941b8;
    --brand-blue-700: #133596;
    --brand-blue-800: #0e2873;
    --brand-blue-900: #091c50;
    --brand-blue-950: #050f2d;

    /* ---------- Colors: brand / teal ---------- */
    --brand-teal-50: #eff7f7;
    --brand-teal-100: #d7eceb;
    --brand-teal-200: #b4dcdb;
    --brand-teal-300: #91cecc;
    --brand-teal-400: #58b8b6;
    --brand-teal-500: #0ea5a4;
    --brand-teal-600: #118b8a;
    --brand-teal-700: #107271;
    --brand-teal-800: #0f5757;
    --brand-teal-900: #0e3e3d;
    --brand-teal-950: #0b2424;

    /* ---------- Colors: brand / aqua ---------- */
    --brand-aqua-50: #f1fbfe;
    --brand-aqua-100: #ddf6fb;
    --brand-aqua-200: #beeff9;
    --brand-aqua-300: #9fe8f7;
    --brand-aqua-400: #67ddf3;
    --brand-aqua-500: #22d3ee;
    --brand-aqua-600: #22b3c9;
    --brand-aqua-700: #1d92a5;
    --brand-aqua-800: #1b7280;
    --brand-aqua-900: #18515c;
    --brand-aqua-950: #133237;

    /* ---------- Colors: brand / violet ---------- */
    --brand-violet-50: #f2f3ff;
    --brand-violet-100: #e0e2ff;
    --brand-violet-200: #c8caff;
    --brand-violet-300: #b2b2ff;
    --brand-violet-400: #928dff;
    --brand-violet-500: #7c6cff;
    --brand-violet-600: #685bd7;
    --brand-violet-700: #554ab0;
    --brand-violet-800: #413988;
    --brand-violet-900: #2d2960;
    --brand-violet-950: #1a1838;

    /* ---------- Colors: brand / coral ---------- */
    --brand-coral-50: #fff5f2;
    --brand-coral-100: #ffe6df;
    --brand-coral-200: #ffd0c4;
    --brand-coral-300: #ffbba9;
    --brand-coral-400: #ff997f;
    --brand-coral-500: #ff7a59;
    --brand-coral-600: #d8674b;
    --brand-coral-700: #b1543d;
    --brand-coral-800: #894130;
    --brand-coral-900: #622f23;
    --brand-coral-950: #3a1d16;

    /* ---------- Colors: neutral / gray ---------- */
    /* Figma defines no 400, 600, 700 or 800 step. */
    --gray-50: #f6f6f6;
    --gray-100: #e7e7e7;
    --gray-200: #d1d1d1;
    --gray-300: #b0b0b0;
    --gray-500: #6d6d6d;
    --gray-900: #2c2b2b;
    --gray-light: #fff;
    --gray-dark: #131212;

    /* ---------- Colors: semantic ---------- */
    --semantic-danger-50: #fdf4ed;
    --semantic-danger-300: #e69677;
    --semantic-danger-500: #ad3322;
    --semantic-danger-700: #82261a;
    --semantic-warning-50: #fefbee;
    --semantic-warning-300: #f7d57e;
    --semantic-warning-500: #dc9d29;
    --semantic-warning-700: #a5761f;
    --semantic-info-50: #eef9fd;
    --semantic-info-300: #7cbfe8;
    --semantic-info-500: #2971b4;
    --semantic-info-700: #1f5587;
    --semantic-success-50: #f5fdef;
    --semantic-success-300: #9dde85;
    --semantic-success-500: #3b9231;
    --semantic-success-700: #2c6e25;

    /* ---------- Spacing ---------- */
    --space-2: 2px;
    --space-4: 4px;
    --space-8: 8px;
    --space-12: 12px;
    --space-16: 16px;
    --space-20: 20px;
    --space-24: 24px;
    --space-32: 32px;
    --space-40: 40px;
    --space-48: 48px;
    --space-56: 56px;
    --space-64: 64px;
    --space-72: 72px;
    --space-80: 80px;
    --space-96: 96px;
    --space-128: 128px;
    --space-176: 176px;
    --space-256: 256px;

    /* ---------- Radius ---------- */
    /* Figma gives these in rem. They are px here so the names stay true: --radius-2 is 2px at any
       root font size, which 0.125rem is not. This says nothing about type, where the unit choice is
       an accessibility question rather than a naming one and is still open. */
    --radius-2: 2px;
    --radius-4: 4px;
    --radius-8: 8px;
    --radius-12: 12px;
    --radius-16: 16px;
    --radius-24: 24px;
    --radius-32: 32px;
    /* Pill, not ellipse: a percentage would curve to the box's own proportions. */
    --radius-full: 9999px;

    /* ---------- Icon sizes ---------- */
    --icon-xs: 16px;
    --icon-sm: 20px;
    --icon-md: 24px;
    --icon-lg: 32px;
    --icon-xl: 40px;
    --icon-2xl: 64px;

    /* ---------- Shadow ---------- */
    /* Each family is one effect made of five stacked layers, not five elevation levels: the offset
       and blur grow while the alpha falls away, and light-5 is fully transparent, so no layer is
       usable on its own. The numbered tokens are the Figma layers; use --shadow-sharp or
       --shadow-light. */
    --shadow-sharp-1: 1px 5px 10px 0 rgb(0 0 0 / 29%);
    --shadow-sharp-2: 2px 19px 19px 0 rgb(0 0 0 / 26%);
    --shadow-sharp-3: 6px 42px 25px 0 rgb(0 0 0 / 15%);
    --shadow-sharp-4: 10px 75px 30px 0 rgb(0 0 0 / 4%);
    --shadow-sharp-5: 15px 117px 33px 0 rgb(0 0 0 / 1%);
    --shadow-light-1: 0 2px 5px 0 rgb(0 0 0 / 15%);
    --shadow-light-2: 0 10px 10px 0 rgb(0 0 0 / 13%);
    --shadow-light-3: 0 22px 13px 0 rgb(0 0 0 / 8%);
    --shadow-light-4: 0 40px 16px 0 rgb(0 0 0 / 2%);
    --shadow-light-5: 0 62px 17px 0 rgb(0 0 0 / 0%);
    --shadow-sharp:
        var(--shadow-sharp-1), var(--shadow-sharp-2), var(--shadow-sharp-3), var(--shadow-sharp-4),
        var(--shadow-sharp-5);
    --shadow-light:
        var(--shadow-light-1), var(--shadow-light-2), var(--shadow-light-3), var(--shadow-light-4),
        var(--shadow-light-5);

    /* ---------- Screens ---------- */
    /* Reference only. Custom properties are not substituted into media feature values, so @media
       rules must repeat these numbers literally; keep the two in sync by hand.

       The names are Figma's own (2xS, xS, Sm, Md, Lg, xL). An earlier transcription dropped Md and
       shifted every name below it down a step, which left --screen-md reading 834 when Md is 1200.
       Matching Figma exactly is what keeps a re-export checkable against this file. */
    --screen-2xs: 320px;
    --screen-xs: 390px;
    --screen-sm: 834px;
    --screen-md: 1200px;
    --screen-lg: 1280px;
    --screen-xl: 1600px;


    /* ---------- Grid ----------
       Five modes, one per Size & Spacing mode, keyed to the screen each one's frame-size aliases:
       Mobile-xSmall -> 2xS, Mobile-Small -> xS, Tablet P -> Sm, Tablet L -> Md,
       Desktop-xLarge -> xL.

       Lg (1280) has no grid mode. It is a screen value that no mode is built on, so the layout
       scale is 320 / 390 / 834 / 1200 / 1600. */
    --grid-2xs-columns: 4;   /* Mobile-xSmall, 320px */
    --grid-2xs-margin: 20px;
    --grid-2xs-gutter: 8px;
    --grid-xs-columns: 6;   /* Mobile-Small, 390px */
    --grid-xs-margin: 20px;
    --grid-xs-gutter: 16px;
    --grid-sm-columns: 6;   /* Tablet P, 834px */
    --grid-sm-margin: 33px;
    --grid-sm-gutter: 24px;
    --grid-md-columns: 12;   /* Tablet L, 1200px */
    --grid-md-margin: 32px;
    --grid-md-gutter: 16px;
    --grid-xl-columns: 12;   /* Desktop-xLarge, 1600px */
    --grid-xl-margin: 144px;
    --grid-xl-gutter: 32px;

    /* ---------- Grid: width by column ----------
       The width an item spans, on a 12-step scale at every mode regardless of how many columns the
       mode actually has.

       xL and Md are literal 12-column arithmetic. Sm and xS lay the 12 steps over 6 columns, so
       each pair of steps advances one column. 2xS is the exception and is a reflow rather than a
       mapping: it never goes narrower than 2 of its 4 columns, and saturates at full width from
       step 4 on. */
    --grid-2xs-col-1: 136px;
    --grid-2xs-col-2: 136px;
    --grid-2xs-col-3: 208px;
    --grid-2xs-col-4: 280px;
    --grid-2xs-col-5: 280px;
    --grid-2xs-col-6: 280px;
    --grid-2xs-col-7: 280px;
    --grid-2xs-col-8: 280px;
    --grid-2xs-col-9: 280px;
    --grid-2xs-col-10: 280px;
    --grid-2xs-col-11: 280px;
    --grid-2xs-col-12: 280px;
    --grid-xs-col-1: 45px;
    --grid-xs-col-2: 45px;
    --grid-xs-col-3: 106px;
    --grid-xs-col-4: 106px;
    --grid-xs-col-5: 167px;
    --grid-xs-col-6: 167px;
    --grid-xs-col-7: 228px;
    --grid-xs-col-8: 228px;
    --grid-xs-col-9: 289px;
    --grid-xs-col-10: 289px;
    --grid-xs-col-11: 350px;
    --grid-xs-col-12: 350px;
    --grid-sm-col-1: 108px;
    --grid-sm-col-2: 108px;
    --grid-sm-col-3: 240px;
    --grid-sm-col-4: 240px;
    --grid-sm-col-5: 372px;
    --grid-sm-col-6: 372px;
    --grid-sm-col-7: 504px;
    --grid-sm-col-8: 504px;
    --grid-sm-col-9: 636px;
    --grid-sm-col-10: 636px;
    --grid-sm-col-11: 768px;
    --grid-sm-col-12: 768px;
    --grid-md-col-1: 79px;
    --grid-md-col-2: 175px;
    --grid-md-col-3: 271px;
    --grid-md-col-4: 367px;
    --grid-md-col-5: 463px;
    --grid-md-col-6: 559px;
    --grid-md-col-7: 655px;
    --grid-md-col-8: 751px;
    --grid-md-col-9: 847px;
    --grid-md-col-10: 943px;
    --grid-md-col-11: 1039px;
    --grid-md-col-12: 1135px;
    --grid-xl-col-1: 80px;
    --grid-xl-col-2: 192px;
    --grid-xl-col-3: 304px;
    --grid-xl-col-4: 416px;
    --grid-xl-col-5: 528px;
    --grid-xl-col-6: 640px;
    --grid-xl-col-7: 752px;
    --grid-xl-col-8: 864px;
    --grid-xl-col-9: 976px;
    --grid-xl-col-10: 1088px;
    --grid-xl-col-11: 1200px;
    --grid-xl-col-12: 1312px;

    /* ---------- Components ---------- */
    --nav-item-min-width-2xs: 250px;
    --nav-item-min-width-xs: 250px;
    --nav-item-min-width-sm: 350px;
    --nav-item-min-width-md: 350px;
    --nav-item-min-width-xl: 350px;

    /* ---------- Typography: families ---------- */
    /* Neither face is installed yet; the font files land in Phase 4. Until then these resolve to
       the fallback stack. */
    --font-heading: Geist, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-body: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

    /* ---------- Typography: heading ---------- */
    /* Figma exports two endpoints, Mobile-Min and Desktop-Max. Whether they interpolate fluidly or
       switch at a breakpoint is a Phase 4 decision, so both are carried here unresolved. Values
       stay in px as exported; the px-to-rem conversion is also a Phase 4 decision. */
    --heading-size-2xl-min: 32px;
    --heading-size-2xl-max: 56px;
    --heading-size-xl-min: 28px;
    --heading-size-xl-max: 48px;
    --heading-size-lg-min: 24px;
    --heading-size-lg-max: 36px;
    --heading-size-md-min: 22px;
    --heading-size-md-max: 32px;
    --heading-size-sm-min: 20px;
    --heading-size-sm-max: 24px;
    --heading-size-xs-min: 16px;
    --heading-size-xs-max: 20px;
    --heading-line-height-2xl-min: 40px;
    --heading-line-height-2xl-max: 64px;
    --heading-line-height-xl-min: 32px;
    --heading-line-height-xl-max: 56px;
    --heading-line-height-lg-min: 28px;
    --heading-line-height-lg-max: 44px;
    --heading-line-height-md-min: 28px;
    --heading-line-height-md-max: 36px;
    --heading-line-height-sm-min: 24px;
    --heading-line-height-sm-max: 28px;
    --heading-line-height-xs-min: 20px;
    --heading-line-height-xs-max: 24px;
    --heading-letter-space-2xl-min: -1.6px;
    --heading-letter-space-2xl-max: -2px;
    --heading-letter-space-xl-min: -1.2px;
    --heading-letter-space-xl-max: -1.6px;
    --heading-letter-space-lg-min: -0.8px;
    --heading-letter-space-lg-max: -1.2px;
    --heading-letter-space-md-min: -0.4px;
    --heading-letter-space-md-max: -1.2px;
    --heading-letter-space-sm-min: -0.2px;
    --heading-letter-space-sm-max: -0.4px;
    --heading-letter-space-xs-min: -0.1px;
    --heading-letter-space-xs-max: -0.2px;

    /* Identical in both modes. */
    --heading-weight-2xl: 700;
    --heading-weight-xl: 700;
    --heading-weight-lg: 700;
    --heading-weight-md: 600;
    --heading-weight-sm: 600;
    --heading-weight-xs: 600;

    /* ---------- Typography: body ---------- */
    --body-size-2xl-min: 20px;
    --body-size-2xl-max: 24px;
    --body-size-xl-min: 18px;
    --body-size-xl-max: 20px;
    --body-size-lg-min: 16px;
    --body-size-lg-max: 18px;
    --body-size-md-min: 14px;
    --body-size-md-max: 16px;
    --body-size-sm-min: 12px;
    --body-size-sm-max: 14px;
    --body-size-xs-min: 10px;
    --body-size-xs-max: 12px;
    --body-line-height-2xl-min: 28px;
    --body-line-height-2xl-max: 32px;
    --body-line-height-xl-min: 24px;
    --body-line-height-xl-max: 32px;
    --body-line-height-lg-min: 20px;
    --body-line-height-lg-max: 28px;
    --body-line-height-md-min: 20px;
    --body-line-height-md-max: 24px;
    --body-line-height-sm-min: 16px;
    --body-line-height-sm-max: 20px;
    --body-line-height-xs-min: 12px;
    --body-line-height-xs-max: 16px;

    /* Zero at every size in both modes. */
    --body-letter-space: 0;

    /* Identical in both modes. The italic entries in Figma are font-style names, not numbers: they
       call for real Inter italic faces, sourced in Phase 4. */
    --body-weight-regular: 400;
    --body-weight-bold: 600;

    /* ---------- Typography: caption ---------- */
    --caption-size-lg-min: 18px;
    --caption-size-lg-max: 20px;
    --caption-size-md-min: 14px;
    --caption-size-md-max: 16px;
    --caption-size-sm-min: 10px;
    --caption-size-sm-max: 12px;

    /* Identical in both modes. */
    --caption-line-height-lg: 20px;
    --caption-line-height-md: 16px;
    --caption-line-height-sm: 16px;

    --caption-letter-space-lg-min: 2.46px;
    --caption-letter-space-lg-max: 2.88px;
    --caption-letter-space-md-min: 2.16px;
    --caption-letter-space-md-max: 2.56px;
    --caption-letter-space-sm-min: 1.52px;
    --caption-letter-space-sm-max: 1.92px;

    /* Identical in both modes, at every size. */
    --caption-weight: 400;
}