/* ================================================================
   LEDGERWISE DESIGN TOKENS
   Version: 1.0.2602
   Source: Figma Design System (Ud45O6Ctw6wYTU1GMY9SCD)
   For: MudBlazor UI Library Theming
   ================================================================ */

:root {

/* ================================================================
   1. COLOR PALETTE
   ================================================================ */

/* --- Primary (Navy Blue) --- */
--color-primary-lighter:        #c5e4f5;
--color-primary-light:          #5ba3c5;
--color-primary-main:           #3980a5;
--color-primary-dark:           #2d6a8a;
--color-primary-darker:         #1a4f6b;
--color-primary-contrast-text:  #ffffff;

/* --- Secondary (Indigo) --- */
--color-secondary-lighter:        #e0e7ff;
--color-secondary-light:          #a5b4fc;
--color-secondary-main:           #6366f1;
--color-secondary-dark:           #4f46e5;
--color-secondary-darker:         #3730a3;
--color-secondary-contrast-text:  #ffffff;

/* --- Info (Cyan) --- */
--color-info-lighter:        #cafdf5;
--color-info-light:          #61f3f3;
--color-info-main:           #00b8d9;
--color-info-dark:           #006c9c;
--color-info-darker:         #003768;
--color-info-contrast-text:  #18181b;  /* dark text on cyan */

/* --- Success (Green) --- */
--color-success-lighter:        #d3fcd2;
--color-success-light:          #77ed8b;
--color-success-main:           #22c55e;
--color-success-dark:           #118d57;
--color-success-darker:         #065e49;
--color-success-contrast-text:  #ffffff;

/* --- Warning (Amber) --- */
--color-warning-lighter:        #fff5cc;
--color-warning-light:          #ffd666;
--color-warning-main:           #ffab00;
--color-warning-dark:           #b76e00;
--color-warning-darker:         #7a4100;
--color-warning-contrast-text:  #18181b;  /* dark text on yellow */

/* --- Error (Red) --- */
--color-error-lighter:        #ffe9d5;
--color-error-light:          #ffac82;
--color-error-main:           #ff5630;
--color-error-dark:           #b71d18;
--color-error-darker:         #7a0916;
--color-error-contrast-text:  #ffffff;

/* --- Grey Scale --- */
--color-grey-50:   #fafafa;
--color-grey-100:  #f9fafb;
--color-grey-200:  #f4f6f8;
--color-grey-300:  #dfe3e8;
--color-grey-400:  #c4cdd5;
--color-grey-500:  #919eab;
--color-grey-600:  #637381;
--color-grey-700:  #454f5b;
--color-grey-800:  #18181b;
--color-grey-900:  #171721;

/* --- Text --- */
--color-text-primary:   #18181b;
--color-text-secondary: #637381;
--color-text-disabled:  #919eab;

/* --- Background --- */
--color-bg-default: #ffffff;
--color-bg-paper:   #ffffff;
--color-bg-neutral: #f9fafb;

/* --- Divider --- */
--color-divider: rgba(145, 158, 171, 0.16);

/* --- Action States --- */
--color-action-active:              #637381;
--color-action-hover:               rgba(145, 158, 171, 0.08);
--color-action-selected:            rgba(145, 158, 171, 0.16);
--color-action-disabled:            rgba(145, 158, 171, 0.80);
--color-action-disabled-background: rgba(145, 158, 171, 0.24);
--color-action-focus:               rgba(145, 158, 171, 0.24);


/* ================================================================
   1b. COLOR OPACITY VARIANTS
   ================================================================ */

/*
   Each color has alpha-channel variants used for
   backgrounds, tints, overlays, and soft fills.
   Format: base hex + alpha hex (e.g. #3980a514 = primary.main at 8%)
*/

/* --- Grey Opacity --- */
--color-grey-8:   rgba(145, 158, 171, 0.08);
--color-grey-12:  rgba(145, 158, 171, 0.12);
--color-grey-16:  rgba(145, 158, 171, 0.16);
--color-grey-20:  rgba(145, 158, 171, 0.20);
--color-grey-24:  rgba(145, 158, 171, 0.24);
--color-grey-32:  rgba(145, 158, 171, 0.32);
--color-grey-48:  rgba(145, 158, 171, 0.48);
--color-grey-56:  rgba(145, 158, 171, 0.56);
--color-grey-64:  rgba(145, 158, 171, 0.64);
--color-grey-72:  rgba(145, 158, 171, 0.72);
--color-grey-80:  rgba(145, 158, 171, 0.80);

/* --- Primary Opacity --- */
--color-primary-8:   rgba(57, 128, 165, 0.08);
--color-primary-12:  rgba(57, 128, 165, 0.12);
--color-primary-16:  rgba(57, 128, 165, 0.16);
--color-primary-20:  rgba(57, 128, 165, 0.20);
--color-primary-24:  rgba(57, 128, 165, 0.24);
--color-primary-32:  rgba(57, 128, 165, 0.32);
--color-primary-48:  rgba(57, 128, 165, 0.48);

/* --- Secondary Opacity --- */
--color-secondary-8:   rgba(99, 102, 241, 0.08);
--color-secondary-12:  rgba(99, 102, 241, 0.12);
--color-secondary-16:  rgba(99, 102, 241, 0.16);
--color-secondary-20:  rgba(99, 102, 241, 0.20);
--color-secondary-24:  rgba(99, 102, 241, 0.24);
--color-secondary-32:  rgba(99, 102, 241, 0.32);
--color-secondary-48:  rgba(99, 102, 241, 0.48);

/* --- Info Opacity --- */
--color-info-8:   rgba(0, 184, 217, 0.08);
--color-info-12:  rgba(0, 184, 217, 0.12);
--color-info-16:  rgba(0, 184, 217, 0.16);
--color-info-20:  rgba(0, 184, 217, 0.20);
--color-info-24:  rgba(0, 184, 217, 0.24);
--color-info-32:  rgba(0, 184, 217, 0.32);
--color-info-48:  rgba(0, 184, 217, 0.48);

/* --- Success Opacity --- */
--color-success-8:   rgba(34, 197, 94, 0.08);
--color-success-12:  rgba(34, 197, 94, 0.12);
--color-success-16:  rgba(34, 197, 94, 0.16);
--color-success-20:  rgba(34, 197, 94, 0.20);
--color-success-24:  rgba(34, 197, 94, 0.24);
--color-success-32:  rgba(34, 197, 94, 0.32);
--color-success-48:  rgba(34, 197, 94, 0.48);

/* --- Warning Opacity --- */
--color-warning-8:   rgba(255, 171, 0, 0.08);
--color-warning-12:  rgba(255, 171, 0, 0.12);
--color-warning-16:  rgba(255, 171, 0, 0.16);
--color-warning-20:  rgba(255, 171, 0, 0.20);
--color-warning-24:  rgba(255, 171, 0, 0.24);
--color-warning-32:  rgba(255, 171, 0, 0.32);
--color-warning-48:  rgba(255, 171, 0, 0.48);

/* --- Error Opacity --- */
--color-error-8:   rgba(255, 86, 48, 0.08);
--color-error-12:  rgba(255, 86, 48, 0.12);
--color-error-16:  rgba(255, 86, 48, 0.16);
--color-error-20:  rgba(255, 86, 48, 0.20);
--color-error-24:  rgba(255, 86, 48, 0.24);
--color-error-32:  rgba(255, 86, 48, 0.32);
--color-error-48:  rgba(255, 86, 48, 0.48);


/* ================================================================
   1c. GRADIENTS
   ================================================================ */

/*
   Each color has two gradient variants, all linear at 135deg:
   - main: light → main  (softer, used for backgrounds/cards)
   - bold: main → dark   (stronger, used for CTAs/emphasis)
*/

/* --- Primary Gradients --- */
--gradient-primary-main: linear-gradient(135deg, #5eafd0 0%, #2d6a8a 100%);
--gradient-primary-bold: linear-gradient(135deg, #3980a5 0%, #1a4f6b 100%);

/* --- Secondary Gradients --- */
--gradient-secondary-main: linear-gradient(135deg, #a5b4fc 0%, #6366f1 100%);
--gradient-secondary-bold: linear-gradient(135deg, #6366f1 0%, #3730a3 100%);

/* --- Info Gradients --- */
--gradient-info-main: linear-gradient(135deg, #61f3f3 0%, #00b8d9 100%);
--gradient-info-bold: linear-gradient(135deg, #00b8d9 0%, #006c9c 100%);

/* --- Success Gradients --- */
--gradient-success-main: linear-gradient(135deg, #77ed8b 0%, #22c55e 100%);
--gradient-success-bold: linear-gradient(135deg, #22c55e 0%, #118d57 100%);

/* --- Warning Gradients --- */
--gradient-warning-main: linear-gradient(135deg, #ffd666 0%, #ffab00 100%);
--gradient-warning-bold: linear-gradient(135deg, #ffab00 0%, #b76e00 100%);

/* --- Error Gradients --- */
--gradient-error-main: linear-gradient(135deg, #ffac82 0%, #ff5630 100%);
--gradient-error-bold: linear-gradient(135deg, #ff5630 0%, #b71d18 100%);


/* ================================================================
   2. TYPOGRAPHY
   ================================================================ */

/* --- Font Families --- */
--font-family-heading: "Outfit", sans-serif;
--font-family-body:    "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

/*
   Google Fonts URLs:
   https://fonts.google.com/specimen/Outfit
   https://fonts.google.com/specimen/Plus+Jakarta+Sans
*/

/* ─── Desktop Headings (>= 900px / md breakpoint) ─── */

/* --- Heading 1 --- */
--font-h1-family:         var(--font-family-heading);
--font-h1-weight:         800;    /* ExtraBold */
--font-h1-size:           64px;
--font-h1-line-height:    80px;
--font-h1-letter-spacing: 0;

/* --- Heading 2 --- */
--font-h2-family:         var(--font-family-heading);
--font-h2-weight:         800;
--font-h2-size:           48px;
--font-h2-line-height:    64px;
--font-h2-letter-spacing: 0;

/* --- Heading 3 --- */
--font-h3-family:         var(--font-family-heading);
--font-h3-weight:         700;
--font-h3-size:           32px;
--font-h3-line-height:    48px;
--font-h3-letter-spacing: 0;

/* --- Heading 4 --- */
--font-h4-family:         var(--font-family-heading);
--font-h4-weight:         700;
--font-h4-size:           24px;
--font-h4-line-height:    36px;
--font-h4-letter-spacing: 0;

/* --- Heading 5 --- */
--font-h5-family:         var(--font-family-heading);
--font-h5-weight:         700;
--font-h5-size:           20px;
--font-h5-line-height:    30px;
--font-h5-letter-spacing: 0;

/* --- Heading 6 --- */
--font-h6-family:         var(--font-family-heading);
--font-h6-weight:         700;
--font-h6-size:           18px;
--font-h6-line-height:    28px;
--font-h6-letter-spacing: 0;

/* ─── Mobile Headings (< 900px) ─── */
/* Only headings change on mobile; body, subtitle, caption, overline stay the same */

--font-h1-mobile-weight:         700;   /* Bold (drops from 800 ExtraBold) */
--font-h1-mobile-size:           40px;
--font-h1-mobile-line-height:    50px;

--font-h2-mobile-weight:         700;
--font-h2-mobile-size:           32px;
--font-h2-mobile-line-height:    42px;

--font-h3-mobile-size:           24px;
--font-h3-mobile-line-height:    36px;

--font-h4-mobile-size:           20px;
--font-h4-mobile-line-height:    30px;

--font-h5-mobile-size:           18px;
--font-h5-mobile-line-height:    27px;

--font-h6-mobile-size:           17px;
--font-h6-mobile-line-height:    26px;

/* ─── Shared Text Styles (same on desktop and mobile) ─── */

/* --- Subtitle 1 --- */
--font-subtitle1-family:      var(--font-family-body);
--font-subtitle1-weight:      600;  /* SemiBold */
--font-subtitle1-size:        16px;
--font-subtitle1-line-height: 24px;

/* --- Subtitle 2 --- */
--font-subtitle2-family:      var(--font-family-body);
--font-subtitle2-weight:      600;
--font-subtitle2-size:        14px;
--font-subtitle2-line-height: 22px;

/* --- Body 1 --- */
--font-body1-family:      var(--font-family-body);
--font-body1-weight:      400;  /* Regular */
--font-body1-size:        16px;
--font-body1-line-height: 24px;

/* --- Body 2 --- */
--font-body2-family:      var(--font-family-body);
--font-body2-weight:      400;
--font-body2-size:        14px;
--font-body2-line-height: 22px;

/* --- Caption --- */
--font-caption-family:      var(--font-family-body);
--font-caption-weight:      400;
--font-caption-size:        12px;
--font-caption-line-height: 18px;

/* --- Overline --- */
--font-overline-family:         var(--font-family-body);
--font-overline-weight:         700;  /* Bold */
--font-overline-size:           12px;
--font-overline-line-height:    18px;
--font-overline-letter-spacing: 0.08em;
--font-overline-text-transform: uppercase;

/* --- Button --- */
--font-button-family:      var(--font-family-body);
--font-button-weight:      600;
--font-button-size:        14px;
--font-button-line-height: 24px;
--font-button-text-transform: none;  /* No uppercase on buttons */


/* ================================================================
   3. SPACING
   ================================================================ */

/* Base unit: 8px */
--spacing-base: 8px;

--spacing-0:  0px;
--spacing-1:  4px;     /* 0.5 units */
--spacing-2:  8px;     /* 1 unit */
--spacing-3:  12px;    /* 1.5 units */
--spacing-4:  16px;    /* 2 units */
--spacing-5:  20px;    /* 2.5 units */
--spacing-6:  24px;    /* 3 units */
--spacing-8:  32px;    /* 4 units */
--spacing-10: 40px;    /* 5 units */
--spacing-12: 48px;    /* 6 units */
--spacing-16: 64px;    /* 8 units */
--spacing-20: 80px;    /* 10 units */
--spacing-24: 96px;    /* 12 units */


/* ================================================================
   4. BORDER RADIUS
   ================================================================ */

--radius-xs:      4px;
--radius-sm:      8px;   /* Default for inputs, buttons, chips */
--radius-md:      12px;
--radius-lg:      16px;  /* Cards, papers, dialogs, modals */
--radius-xl:      24px;
--radius-full:    9999px; /* Circular elements (avatars, pills) */


/* ================================================================
   5. SHADOWS / ELEVATION
   ================================================================ */

/* Neutral shadows (grey-based) — named z1..z24 in Figma */
--shadow-z1:   0px 1px 2px 0px rgba(145, 158, 171, 0.16);
--shadow-z4:   0px 4px 8px 0px rgba(145, 158, 171, 0.16);
--shadow-z8:   0px 8px 16px 0px rgba(145, 158, 171, 0.16);
--shadow-z12:  0px 12px 24px -4px rgba(145, 158, 171, 0.16);
--shadow-z16:  0px 16px 32px -4px rgba(145, 158, 171, 0.16);
--shadow-z20:  0px 20px 40px -4px rgba(145, 158, 171, 0.16);
--shadow-z24:  0px 24px 48px 0px rgba(145, 158, 171, 0.16);

/* Component-specific shadows */
--shadow-card:     0px 12px 24px -4px rgba(145, 158, 171, 0.12),
                   0px 0px 2px 0px rgba(145, 158, 171, 0.20);
--shadow-dialog:   -40px 40px 80px -8px rgba(0, 0, 0, 0.24);
--shadow-dropdown: -20px 20px 40px -4px rgba(145, 158, 171, 0.24),
                   0px 0px 2px 0px rgba(145, 158, 171, 0.24);

/* Color-specific shadows (used on hover for contained buttons) */
--shadow-primary:   0px 8px 16px 0px rgba(29, 59, 102, 0.24);
--shadow-secondary: 0px 8px 16px 0px rgba(83, 172, 232, 0.24);
--shadow-info:      0px 8px 16px 0px rgba(0, 184, 217, 0.24);
--shadow-success:   0px 8px 16px 0px rgba(34, 197, 94, 0.24);
--shadow-warning:   0px 8px 16px 0px rgba(255, 171, 0, 0.24);
--shadow-error:     0px 8px 16px 0px rgba(255, 86, 48, 0.24);


/* ================================================================
   6. COMPONENT TOKENS
   ================================================================ */

/* --- Buttons --- */
--button-radius:              8px;
--button-font-weight:         600;
--button-text-transform:      none;
--button-height-large:        48px;
--button-height-medium:       40px;
--button-height-small:        32px;
--button-font-size-large:     15px;   /* 0.9375rem */
--button-font-size-medium:    14px;   /* 0.875rem */
--button-font-size-small:     13px;   /* 0.8125rem */

/* --- Inputs --- */
--input-radius:               8px;
--input-border-color:         rgba(145, 158, 171, 0.32);
--input-border-hover:         #18181b;  /* text.primary */
--input-border-focus:         #3980a5;  /* primary.main */
--input-label-color:          #637381;  /* text.secondary */
--input-label-focus:          #3980a5;  /* primary.main */
--input-filled-bg:            rgba(145, 158, 171, 0.08);

/* --- Cards --- */
--card-radius:                16px;
--card-shadow:                var(--shadow-card);

/* --- Paper / Surface --- */
--paper-radius:               16px;
--paper-outlined-border:      rgba(145, 158, 171, 0.16);

/* --- Dialog / Modal --- */
--dialog-radius:              16px;
--dialog-shadow:              var(--shadow-dialog);

/* --- Avatar --- */
--avatar-font-size:           14px;   /* 0.875rem */
--avatar-font-weight:         600;

/* --- Chip --- */
--chip-font-weight:           500;

/* --- Links --- */
--link-color:                 #3980a5;
--link-hover-color:           #2d6a8a;
--link-underline:             hover;   /* Underline on hover only */

/* --- Navigation --- */
--nav-item-font-family:       var(--font-family-body);
--nav-item-font-size:         14px;
--nav-item-font-weight:       500;
--nav-item-line-height:       22px;
--nav-item-mini-font-size:    10px;
--nav-item-mini-line-height:  16px;
--nav-subheader-font-size:    11px;
--nav-subheader-font-weight:  700;
--nav-subheader-line-height:  18px;
--nav-subheader-text-transform: uppercase;

/* --- Layout --- */
--layout-content-bg:          var(--color-grey-100);
--layout-header-bg:           var(--color-bg-default);
--layout-sidebar-bg:          var(--color-bg-paper);
--layout-sidebar-border:      var(--color-divider);


/* ================================================================
   7. BREAKPOINTS
   ================================================================ */

--breakpoint-xs:   0px;
--breakpoint-sm:   600px;
--breakpoint-md:   900px;
--breakpoint-lg:   1200px;
--breakpoint-xl:   1536px;


/* ================================================================
   8. GRID SYSTEM
   ================================================================ */

/*
   Desktop: 12 columns, center-aligned
   Available gutter options: 24px, 32px, 40px, 80px
   Default gutter: 24px

   Mobile: 4 columns, stretch-aligned
   Gutter: 24px, Offset (margin): 16px
*/


/* ================================================================
   9. NOTES FOR MUDBLAZOR IMPLEMENTATION
   ================================================================

   MudBlazor Theme Mapping Guide:
   ──────────────────────────────

   MudTheme.Palette.Primary         → --color-primary-main (#3980a5)
   MudTheme.Palette.PrimaryDarken   → --color-primary-dark (#2d6a8a)
   MudTheme.Palette.PrimaryLighten  → --color-primary-light (#5ba3c5)

   MudTheme.Palette.Secondary       → --color-secondary-main (#6366f1)
   MudTheme.Palette.Info            → --color-info-main (#00b8d9)
   MudTheme.Palette.Success         → --color-success-main (#22c55e)
   MudTheme.Palette.Warning         → --color-warning-main (#ffab00)
   MudTheme.Palette.Error           → --color-error-main (#ff5630)

   MudTheme.Palette.TextPrimary     → --color-text-primary (#18181b)
   MudTheme.Palette.TextSecondary   → --color-text-secondary (#637381)
   MudTheme.Palette.TextDisabled    → --color-text-disabled (#919eab)

   MudTheme.Palette.Background      → --color-bg-default (#ffffff)
   MudTheme.Palette.Surface         → --color-bg-paper (#ffffff)
   MudTheme.Palette.BackgroundGrey  → --color-bg-neutral (#f9fafb)

   MudTheme.Palette.Divider         → --color-divider (rgba(145,158,171,0.16))
   MudTheme.Palette.HoverOpacity    → 0.08

   MudTheme.Typography.Default.FontFamily → "Plus Jakarta Sans", sans-serif
   MudTheme.Typography.H1.FontFamily      → "Outfit", sans-serif
   (repeat for H2-H6)

   Contrast Text Notes:
   ─────────────────────
   Primary, Secondary, Success, Error → white (#ffffff)
   Info, Warning → dark (#18181b)

   Mobile Typography (< 900px breakpoint):
   ─────────────────────────────────────
   H1:  40px / 700 Bold / 50px line-height  (desktop: 64px / 800 / 80px)
   H2:  32px / 700 Bold / 42px line-height  (desktop: 48px / 800 / 64px)
   H3:  24px / 700 / 36px line-height       (desktop: 32px / 700 / 48px)
   H4:  20px / 700 / 30px line-height       (desktop: 24px / 700 / 36px)
   H5:  18px / 700 / 27px line-height       (desktop: 20px / 700 / 30px)
   H6:  17px / 700 / 26px line-height       (desktop: 18px / 700 / 28px)
   Body, Subtitle, Caption, Overline → same values on mobile and desktop

   MudTheme.LayoutProperties.DefaultBorderRadius → 8px
   MudTheme.Shadows.Elevation[5]                 → Card shadow
   MudTheme.Shadows.Elevation[8]                 → Dialog shadow

   Google Fonts to import:
   - https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&display=swap
       - https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap

      ================================================================ */

   } /* end :root */