/* ============================================================
   B3 Brand Design Tokens
   CSS custom properties mirroring MAUI Colors.xaml + Styles.xaml
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap');

:root {
    /* ── Typography ── */
    --b3-font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --b3-font-size-xs: 12px;
    --b3-font-size-sm: 14px;
    --b3-font-size-base: 16px;
    --b3-font-size-lg: 18px;
    --b3-font-size-xl: 20px;

    /* ── Primary ramp (Gold) ── */
    --b3-primary: #E7A643;
    --b3-primary-dark: #C88E38;
    --b3-primary-darker: #876428;
    --b3-primary-light: #F7CE86;
    --b3-primary-lighter: #FFF2D8;

    /* ── Accent ramp (Blue) ── */
    --b3-accent: #5185E5;
    --b3-accent-dark: #3967C4;
    --b3-accent-darker: #294DA1;
    --b3-accent-light: #8FB2F0;
    --b3-accent-lighter: #D8E4FA;

    /* ── Accent Alt ramp (Teal) ── */
    --b3-accent-alt: #2AA39A;
    --b3-accent-alt-dark: #1F7C75;
    --b3-accent-alt-darker: #155853;
    --b3-accent-alt-light: #5FC0B7;
    --b3-accent-alt-lighter: #C8EDEA;

    /* ── Gray ramp ── */
    --b3-gray-50: #ebebeb;
    --b3-gray-100: #E1E1E1;
    --b3-gray-200: #C8C8C8;
    --b3-gray-300: #ACACAC;
    --b3-gray-400: #919191;
    --b3-gray-500: #6E6E6E;
    --b3-gray-525: #636363;
    --b3-gray-550: #575757;
    --b3-gray-575: #4B4B4B;
    --b3-gray-600: #404040;
    --b3-gray-800: #2D2D2D;
    --b3-gray-900: #212121;
    --b3-gray-950: #141414;

    /* ── Surfaces ──
       MAUI PageGradientStartLight=#FDF6EC (warm cream), SurfaceLight=#F4F4F5
       CardBackgroundLight=#FFFFFF sits on top of the warm page background */
    --b3-background: #FDF6EC; /* MAUI PageGradientStartLight — warm cream */
    --b3-background-darker: #ede4d8; /* MAUI PageGradientStartLight_Darker */
    --b3-surface: #F4F4F5; /* MAUI SurfaceLight */
    --b3-surface-warm: #fdfbf7; /* MAUI HeaderSectionGradientStartLight */
    --b3-border-color: #BEBFC1; /* MAUI BorderLight */
    --b3-card-bg: #FFFFFF; /* MAUI CardBackgroundLight */

    /* ── Text ── */
    --b3-text-primary: #2D2D2D;
    --b3-text-muted: #777777;
    --b3-text-muted-darker: #575757;
    --b3-text-header: #2D2D2D;

    /* ── Semantic / Status ── */
    --b3-success: #57BA47;
    --b3-success-dark: #449238;
    --b3-success-light: #79CA6B;
    --b3-success-lighter: #B6E1B0;

    --b3-warning: #E68C11;
    --b3-warning-dark: #B56C0D;
    --b3-warning-darker: #7F4C09;
    --b3-warning-light: #F3B44E;
    --b3-warning-lighter: #FADDA6;

    --b3-error: #EE3223;
    --b3-error-dark: #B9261A;
    --b3-error-light: #F35C50;
    --b3-error-lighter: #F9A6A0;

    --b3-info: #467CD1;
    --b3-info-dark: #3663A8;
    --b3-info-darker: #264A81;
    --b3-info-light: #7EA6E3;
    --b3-info-lighter: #C9DAF6;

    /* ── Gradients ── */
    --b3-gradient-header: linear-gradient(135deg, var(--b3-primary), var(--b3-primary-light));
    --b3-gradient-accent: linear-gradient(135deg, var(--b3-accent), var(--b3-accent-alt));
    --b3-gradient-page-bg: linear-gradient(180deg, #fdfbf7 0%, #FDECD6 100%); /* MAUI HeaderSectionGradientBrush */
    --b3-gradient-page-subtle: linear-gradient(180deg, #FDF6EC 0%, #fdfbf7 100%); /* warm page fill */

    /* ── Shape / Radius ── */
    --b3-radius-sm: 3px;
    --b3-radius-md: 8px;
    --b3-radius-lg: 12px;
    --b3-radius-card: 12px;
    --b3-radius-pill: 22px;

    /* ── Shadows ── */
    --b3-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --b3-shadow-card: 0 2px 8px rgba(0, 0, 0, 0.15); /* MAUI Shadow Radius=8, Opacity=0.15, Offset=0,2 */
    --b3-shadow-popup: 0 6px 20px rgba(0, 0, 0, 0.15);

    /* ── Spacing / Sizing ── */
    --b3-btn-min-height: 44px;
    --b3-btn-padding-h: 10px; /* MAUI Padding="10,12" → 10 horizontal */
    --b3-btn-padding-v: 12px; /* MAUI Padding="10,12" → 12 vertical */
    --b3-card-padding: 16px;

    /* ── Toolbar / Sidebar ── */
    --b3-toolbar-bg: var(--b3-gradient-header);
    --b3-toolbar-text: #FFFFFF;
    --b3-sidebar-bg: var(--b3-card-bg);
    --b3-sidebar-hover: var(--b3-primary-lighter);
    --b3-sidebar-active: var(--b3-primary-light);
}