/* Design System - CSS Tokens
 * Source of truth: Figma variables export (2026-03-02)
 * Contains all primitive design variables for the LSH design system
 *
 * Color scales used by LSH: Base, Neutral Brand, Neutral, White Alpha,
 * Primary (--brand-*), Error, Warning, Success
 * Extended palette from Untitled UI base: Green, Moss, Teal, Cyan, Blue,
 * Indigo, Violet, Purple, Fuchsia, Pink, Rose, Orange, Yellow
 */

:root {
    /* ================================================================
     * BASE COLORS
     * ================================================================ */
    --color-white: #FFFFFF;
    --color-black: #182230;
    --color-transparent: rgba(255, 255, 255, 0);

    /* ================================================================
     * NEUTRAL BRAND — Primary neutral scale (light mode)
     * Used for text, backgrounds, borders in light theme
     * ================================================================ */
    --neutral-brand-25: #FCFCFD;
    --neutral-brand-50: #F9FAFB;
    --neutral-brand-100: #F2F4F7;
    --neutral-brand-200: #E4E7EC;
    --neutral-brand-300: #D0D5DD;
    --neutral-brand-400: #98A2B3;
    --neutral-brand-500: #667085;
    --neutral-brand-600: #475467;
    --neutral-brand-700: #344054;
    --neutral-brand-800: #182230;
    --neutral-brand-900: #101828;
    --neutral-brand-950: #0C111D;

    /* ================================================================
     * NEUTRAL — Secondary neutral scale (dark mode)
     * Used for text, backgrounds, borders in dark theme
     * ================================================================ */
    --neutral-25: #FAFAFA;
    --neutral-50: #F5F5F6;
    --neutral-100: #F0F1F1;
    --neutral-200: #ECECED;
    --neutral-300: #CECFD2;
    --neutral-400: #94969C;
    --neutral-500: #85888E;
    --neutral-600: #61646C;
    --neutral-700: #333741;
    --neutral-800: #1F242F;
    --neutral-900: #161B26;
    --neutral-950: #0C111D;

    /* ================================================================
     * WHITE ALPHA — Transparent white overlays
     * ================================================================ */
    --white-alpha-25: rgba(255, 255, 255, 0.98);
    --white-alpha-50: rgba(255, 255, 255, 0.96);
    --white-alpha-100: rgba(255, 255, 255, 0.94);
    --white-alpha-200: rgba(255, 255, 255, 0.92);
    --white-alpha-300: rgba(255, 255, 255, 0.80);
    --white-alpha-400: rgba(255, 255, 255, 0.56);
    --white-alpha-500: rgba(255, 255, 255, 0.50);
    --white-alpha-600: rgba(255, 255, 255, 0.35);
    --white-alpha-700: rgba(255, 255, 255, 0.16);
    --white-alpha-800: rgba(255, 255, 255, 0.08);
    --white-alpha-900: rgba(255, 255, 255, 0.04);
    --white-alpha-950: rgba(255, 255, 255, 0);

    /* ================================================================
     * BRAND (Primary) — Main brand color scale
     * Figma collection name: "Primary"
     * ================================================================ */
    --brand-25: #FCFDFF;
    --brand-50: #F6F8FE;
    --brand-100: #E9EEFD;
    --brand-200: #D9E2FC;
    --brand-300: #C9D5FB;
    --brand-400: #ADC1F9;
    --brand-500: #92ACF7;
    --brand-600: #6E87CF;
    --brand-700: #4E659E;
    --brand-800: #32446E;
    --brand-900: #19253D;
    --brand-950: #05070D;

    /* ================================================================
     * ERROR — Destructive / error states
     * ================================================================ */
    --error-25: #FFF7F7;
    --error-50: #FFF0F0;
    --error-100: #FFD9D9;
    --error-200: #FFA6A6;
    --error-300: #FF8080;
    --error-400: #FF4040;
    --error-500: #FF0000;
    --error-600: #D90000;
    --error-700: #B30000;
    --error-800: #8C0000;
    --error-900: #660000;
    --error-950: #260000;

    /* ================================================================
     * SUCCESS — Positive / success states
     * ================================================================ */
    --success-25: #F8FCFA;
    --success-50: #EBF7F1;
    --success-100: #CDECDB;
    --success-200: #A8DDC1;
    --success-300: #83CFA6;
    --success-400: #45B77A;
    --success-500: #079F4D;
    --success-600: #009440;
    --success-700: #008534;
    --success-800: #007128;
    --success-900: #00581D;
    --success-950: #00260C;

    /* ================================================================
     * WARNING — Caution / warning states
     * ================================================================ */
    --warning-25: #FBF7EE;
    --warning-50: #FBF4E2;
    --warning-100: #FBE5B0;
    --warning-200: #FBDE97;
    --warning-300: #FBCF64;
    --warning-400: #FBC43F;
    --warning-500: #FBB201;
    --warning-600: #D48601;
    --warning-700: #AD6301;
    --warning-800: #874401;
    --warning-900: #612A01;
    --warning-950: #260E01;

    /* ================================================================
     * EXTENDED PALETTE — Untitled UI base colors
     * Not in LSH Figma token export; kept for potential use
     * in data visualization, tags, and decorative elements
     * ================================================================ */

    /* Green */
    --green-25: #F7FEF9;
    --green-50: #EDFDFA;
    --green-100: #D3F9DF;
    --green-200: #AAECB3;
    --green-300: #72CFA3;
    --green-400: #3CCC7F;
    --green-500: #16B364;
    --green-600: #099250;
    --green-700: #087443;
    --green-800: #095C36;
    --green-900: #084C2E;

    /* Green Light */
    --green-light-25: #FBFFF5;
    --green-light-50: #F3FDE8;
    --green-light-100: #E4F9CC;
    --green-light-200: #D0F8AA;
    --green-light-300: #A7EF67;
    --green-light-400: #85E339;
    --green-light-500: #65C61C;
    --green-light-600: #4BA30D;
    --green-light-700: #3A7C0F;
    --green-light-800: #326212;
    --green-light-900: #2B5314;

    /* Moss */
    --moss-25: #FAFDF8;
    --moss-50: #F5FB87;
    --moss-100: #E6F4D7;
    --moss-200: #CEEBB0;
    --moss-300: #ACDC79;
    --moss-400: #86CC3C;
    --moss-500: #679F2A;
    --moss-600: #4F7A20;
    --moss-700: #3F621A;
    --moss-800: #335015;
    --moss-900: #2B4212;
    --moss-950: #1A281B;

    /* Teal */
    --teal-25: #F1FDFA;
    --teal-100: #CCFAF0;
    --teal-200: #99F6E0;
    --teal-300: #5FEAD0;
    --teal-400: #2ED3B7;
    --teal-500: #15B79E;
    --teal-600: #0E9384;
    --teal-700: #107569;
    --teal-800: #125D55;
    --teal-900: #134E48;

    /* Cyan */
    --cyan-50: #ECFEFF;
    --cyan-100: #CFFAFE;
    --cyan-200: #A5F1FC;
    --cyan-300: #67E3F9;
    --cyan-400: #22CCEE;
    --cyan-500: #06AED4;
    --cyan-600: #088AB2;
    --cyan-700: #0E7090;
    --cyan-800: #155B75;
    --cyan-900: #164C63;
    --cyan-950: #0D2E3A;

    /* Blue */
    --blue-25: #F5F8FF;
    --blue-50: #EFF4FF;
    --blue-100: #D1E0FF;
    --blue-200: #B2CCFF;
    --blue-300: #84ADFF;
    --blue-400: #528BFF;
    --blue-500: #2970FF;
    --blue-600: #155EEF;
    --blue-700: #004EEB;
    --blue-800: #0040C1;
    --blue-900: #00349F;

    /* Indigo */
    --indigo-25: #F5F8FF;
    --indigo-50: #EEF4FF;
    --indigo-100: #E0EAFF;
    --indigo-200: #C7D7FE;
    --indigo-300: #A4BCFD;
    --indigo-400: #8098F9;
    --indigo-500: #6172F3;
    --indigo-600: #444CE7;
    --indigo-700: #3538CD;
    --indigo-800: #2D31A6;
    --indigo-900: #2D3282;
    --indigo-950: #1F2358;

    /* Violet */
    --violet-25: #FBFAFF;
    --violet-50: #F5F3FF;
    --violet-100: #ECE9FF;
    --violet-200: #DDD6FE;
    --violet-300: #C3B5FD;
    --violet-400: #A48AFE;
    --violet-500: #875BF7;
    --violet-600: #7839EE;
    --violet-700: #6927DA;
    --violet-800: #5720B7;
    --violet-900: #491995;
    --violet-950: #2E125E;

    /* Purple */
    --purple-25: #FBFAFF;
    --purple-50: #F4F3FF;
    --purple-100: #EBE9FE;
    --purple-200: #D9D6FE;
    --purple-300: #BDB4FE;
    --purple-400: #9B8AFB;
    --purple-500: #7A5AF8;
    --purple-600: #6938EF;
    --purple-700: #5925DC;
    --purple-800: #4A1FB8;
    --purple-900: #3E1C96;
    --purple-950: #27126C;

    /* Fuchsia */
    --fuchsia-25: #FEFAFF;
    --fuchsia-50: #FDF4FF;
    --fuchsia-100: #FBE8FF;
    --fuchsia-200: #F6D0FE;
    --fuchsia-300: #EEAAFD;
    --fuchsia-400: #E478FA;
    --fuchsia-500: #D444F1;
    --fuchsia-600: #BA24D5;
    --fuchsia-700: #9F1AB1;
    --fuchsia-800: #821790;
    --fuchsia-900: #6F1877;

    /* Pink */
    --pink-25: #FEF6FB;
    --pink-50: #FDF2FA;
    --pink-100: #FCE7F6;
    --pink-200: #FCCEEE;
    --pink-300: #FAA7E0;
    --pink-400: #F670C7;
    --pink-500: #EE46BC;
    --pink-600: #DD2590;
    --pink-700: #C11574;
    --pink-800: #9E165F;
    --pink-900: #851651;
    --pink-950: #4E0D30;

    /* Rose */
    --rose-25: #FFF5F6;
    --rose-50: #FFF1F3;
    --rose-100: #FFE4E8;
    --rose-200: #FECDD6;
    --rose-300: #FEA3B4;
    --rose-400: #FD6F8E;
    --rose-500: #F63D68;
    --rose-600: #E31B54;
    --rose-700: #C01048;
    --rose-800: #A11043;
    --rose-900: #89123E;
    --rose-950: #510A24;

    /* Orange */
    --orange-25: #FEFAF5;
    --orange-50: #FEF6EE;
    --orange-100: #FDEAD7;
    --orange-200: #F9DBAF;
    --orange-300: #F7B27A;
    --orange-400: #F38744;
    --orange-500: #FF8800;
    --orange-600: #E05A00;
    --orange-700: #BA4F07;
    --orange-800: #932F19;
    --orange-900: #772917;
    --orange-950: #57130A;

    /* Orange Dark */
    --orange-dark-25: #FFF9F5;
    --orange-dark-50: #FFF4ED;
    --orange-dark-100: #FFE6D5;
    --orange-dark-200: #FFD6AD;
    --orange-dark-300: #FF9C66;
    --orange-dark-400: #FF692E;
    --orange-dark-500: #FF4405;
    --orange-dark-600: #E62E05;
    --orange-dark-700: #BC1B05;
    --orange-dark-800: #97180C;
    --orange-dark-900: #771A0D;
    --orange-dark-950: #57130A;

    /* Yellow */
    --yellow-25: #FEFCE9;
    --yellow-50: #FEFBE8;
    --yellow-100: #FEF7C3;
    --yellow-200: #FEEE95;
    --yellow-300: #FDE272;
    --yellow-400: #FAC515;
    --yellow-500: #F79009;
    --yellow-600: #DC6803;
    --yellow-700: #A15C07;
    --yellow-800: #85471A;
    --yellow-900: #713B12;

    /* ================================================================
     * SPACING — Complete scale from Figma (4px base grid)
     * Step naming: --spacing-{step} where step × 4 = pixel value
     * ================================================================ */
    --spacing-0: 0;
    --spacing-0-5: 0.125rem;  /* 2px */
    --spacing-1: 0.25rem;     /* 4px */
    --spacing-1-5: 0.375rem;  /* 6px */
    --spacing-2: 0.5rem;      /* 8px */
    --spacing-2-5: 0.625rem;  /* 10px */
    --spacing-3: 0.75rem;     /* 12px */
    --spacing-4: 1rem;        /* 16px */
    --spacing-5: 1.25rem;     /* 20px */
    --spacing-6: 1.5rem;      /* 24px */
    --spacing-8: 2rem;        /* 32px */
    --spacing-10: 2.5rem;     /* 40px */
    --spacing-12: 3rem;       /* 48px */
    --spacing-16: 4rem;       /* 64px */
    --spacing-20: 5rem;       /* 80px */
    --spacing-24: 6rem;       /* 96px */
    --spacing-32: 8rem;       /* 128px */
    --spacing-40: 10rem;      /* 160px */
    --spacing-48: 12rem;      /* 192px */
    --spacing-56: 14rem;      /* 224px */
    --spacing-64: 16rem;      /* 256px */
    --spacing-80: 20rem;      /* 320px */
    --spacing-96: 24rem;      /* 384px */
    --spacing-120: 30rem;     /* 480px */
    --spacing-140: 35rem;     /* 560px */
    --spacing-160: 40rem;     /* 640px */
    --spacing-180: 45rem;     /* 720px */
    --spacing-192: 48rem;     /* 768px */
    --spacing-256: 64rem;     /* 1024px */
    --spacing-320: 80rem;     /* 1280px */
    --spacing-360: 90rem;     /* 1440px */
    --spacing-400: 100rem;    /* 1600px */
    --spacing-480: 120rem;    /* 1920px */

    /* ================================================================
     * RADIUS — Border radius scale from Figma
     * ================================================================ */
    --radius-none: 0;
    --radius-xxs: 0.125rem;   /* 2px */
    --radius-xs: 0.25rem;     /* 4px */
    --radius-sm: 0.375rem;    /* 6px */
    --radius-md: 0.5rem;      /* 8px */
    --radius-lg: 0.625rem;    /* 10px */
    --radius-xl: 0.75rem;     /* 12px */
    --radius-2xl: 1rem;       /* 16px */
    --radius-3xl: 1.25rem;    /* 20px */
    --radius-4xl: 1.5rem;     /* 24px */
    --radius-full: 9999px;

    /* ================================================================
     * WIDTHS — Layout width constraints from Figma
     * ================================================================ */
    --width-xxs: 20rem;       /* 320px */
    --width-xs: 24rem;        /* 384px */
    --width-sm: 30rem;        /* 480px */
    --width-md: 35rem;        /* 560px */
    --width-lg: 40rem;        /* 640px */
    --width-xl: 48rem;        /* 768px */
    --width-2xl: 64rem;       /* 1024px */
    --width-3xl: 80rem;       /* 1280px */
    --width-4xl: 90rem;       /* 1440px */
    --width-5xl: 100rem;      /* 1600px */
    --width-6xl: 120rem;      /* 1920px */
    --paragraph-max-width: 45rem; /* 720px */

    /* ================================================================
     * CONTAINERS — Layout container tokens from Figma
     * ================================================================ */
    --container-padding-mobile: 1rem;    /* 16px */
    --container-padding-desktop: 2rem;   /* 32px */
    --container-max-width: 80rem;        /* 1280px */

    /* ================================================================
     * TYPOGRAPHY
     * ================================================================ */

    /* Font families */
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

    /* Font sizes — Text scale */
    --font-size-xs: 0.75rem;      /* 12px */
    --font-size-sm: 0.875rem;     /* 14px */
    --font-size-md: 1rem;         /* 16px */
    --font-size-lg: 1.125rem;     /* 18px */
    --font-size-xl: 1.25rem;      /* 20px */

    /* Font sizes — Display scale */
    --font-size-display-xs: 1.5rem;    /* 24px */
    --font-size-display-sm: 1.875rem;  /* 30px */
    --font-size-display-md: 2.25rem;   /* 36px */
    --font-size-display-lg: 3rem;      /* 48px */
    --font-size-display-xl: 3.75rem;   /* 60px */
    --font-size-display-2xl: 4.5rem;   /* 72px */

    /* Line heights — Text scale */
    --line-height-xs: 1rem;        /* 16px */
    --line-height-sm: 1.25rem;     /* 20px */
    --line-height-md: 1.5rem;      /* 24px */
    --line-height-lg: 1.75rem;     /* 28px */
    --line-height-xl: 1.875rem;    /* 30px */

    /* Line heights — Display scale */
    --line-height-display-xs: 2rem;      /* 32px */
    --line-height-display-sm: 2.375rem;  /* 38px */
    --line-height-display-md: 2.75rem;   /* 44px */
    --line-height-display-lg: 3.75rem;   /* 60px */
    --line-height-display-xl: 4.5rem;    /* 72px */
    --line-height-display-2xl: 5.625rem; /* 90px */

    /* Font weights */
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* ================================================================
     * SHADOWS — Base shadows (overridden per color mode)
     * ================================================================ */
    --shadow-xs: 0 1px 2px 0 rgba(16, 24, 40, 0.05);
    --shadow-sm: 0 1px 2px 0 rgba(16, 24, 40, 0.06), 0 1px 3px 0 rgba(16, 24, 40, 0.1);
    --shadow-md: 0 2px 4px -2px rgba(16, 24, 40, 0.06), 0 4px 8px -2px rgba(16, 24, 40, 0.1);
    --shadow-lg: 0 4px 6px -2px rgba(16, 24, 40, 0.03), 0 12px 16px -4px rgba(16, 24, 40, 0.08);
    --shadow-xl: 0 8px 8px -4px rgba(16, 24, 40, 0.03), 0 20px 24px -4px rgba(16, 24, 40, 0.08);
    --shadow-2xl: 0 24px 48px -12px rgba(16, 24, 40, 0.12);
    --shadow-3xl: 0 32px 64px -12px rgba(16, 24, 40, 0.08);

    /* Focus rings */
    --focus-ring: 0 0 0 4px var(--brand-500);
    --focus-ring-error: 0 0 0 4px var(--error-500);
}