/* ============================================================
   Brand Design Tokens — Rebranding 2026
   ------------------------------------------------------------
   Single source of truth for colors, typography and radii.
   Change the values here to re-skin the whole application.
   Values reflect the current INTESA SANPAOLO BANK palette so that
   the app looks identical until new brand values are provided.
   ============================================================ */

:root {
    /* --- Brand palette --- */
    /* ========================================================
       RAW palette — Rebranding 2026 (from UI Guide Book).
       These are the source swatches. Prefer using the semantic
       tokens below instead of these raw values directly.
       ======================================================== */

    /* Green */
    --green-10: #DAF7ED;
    --green-20: #72FCCC;
    --green-30: #3CEDB0;
    --green-40: #1CBB84;
    --green-50: #18A373;
    --green-60: #158A61;
    --green-70: #0F6C4D;
    --green-80: #0B4A35;
    --green-90: #073325;

    /* Orange */
    --orange-20: #FFF1E9;
    --orange-30: #facdb2;
    --orange-50: #EA600E;
    --orange-80: #901700;

    /* Neutral */
    --neutral-white: #FFFFFF;
    --neutral-grey-10: #FAFAFA;
    --neutral-grey-20: #F5F5F5;
    --neutral-grey-30: #E6E6E6;
    --neutral-grey-40: #CCCCCC;
    --neutral-grey-50: #B3B3B3;
    --neutral-grey-60: #919191;
    --neutral-grey-70: #808080;
    --neutral-grey-80: #707070;
    --neutral-grey-90: #4D4D4D;
    --neutral-grey-100: #262626;
    --neutral-black: #000000;

    /* Support */
    --green-pine-50: #28793A;
    --red-10: #FAE7E6;
    --red-50: #CE2322;
    --yellow-50: #FFFE00;
    --cyan-30: #8EEAFF;

    /* ========================================================
       SEMANTIC tokens — how to apply the palette.
       ======================================================== */

    /* --- Brand palette ---
       Rebranding 2026: primary is GREEN, secondary is ORANGE. */
    --brand-primary: var(--green-80);          /* #0B4A35 primary */
    --brand-primary-dark: var(--green-80);     /* #0B4A35 primary-dark */
    --brand-primary-visual-support: var(--green-60); /* #158A61 */
    --brand-primary-light: var(--green-40);    /* #1CBB84 primary-light */
    --brand-primary-ultra-light: var(--green-10); /* #DAF7ED */
    --brand-primary-hover: var(--green-70);    /* darker on hover/active */
    --brand-primary-contrast: var(--neutral-white); /* text/icon on primary */

    --brand-secondary: var(--orange-50);       /* #EA600E secondary */
    --brand-secondary-dark: var(--orange-80);  /* #901700 secondary-dark */
    --brand-secondary-light: var(--orange-30); /* #facdb2 secondary-light */
    --brand-secondary-ultra-light: var(--orange-20); /* #FFF1E9 */
    --brand-secondary-hover: var(--orange-80);
    --brand-secondary-contrast: var(--neutral-white);

    /* --- Semantic / status --- */
    --color-danger: var(--red-50);
    --color-danger-strong: var(--orange-80);
    --color-danger-alt: var(--red-50);        /* muted red */
    --color-error: var(--red-50);             /* validation */
    --color-success: var(--green-pine-50);    /* positive */
    --color-warning: var(--yellow-50);

    /* Bootstrap-style contextual colors */
    --color-btn-success: var(--green-pine-50);
    --color-btn-danger: var(--red-50);
    --color-btn-warning: var(--orange-50);

    /* --- Neutrals --- */
    --color-bg: var(--neutral-white);
    --color-surface: var(--neutral-grey-10);
    --color-surface-alt: var(--neutral-grey-20);
    --color-surface-muted: var(--neutral-grey-30);

    --color-text: var(--neutral-grey-100);
    --color-text-muted: var(--neutral-grey-70);    /* disabled-text: grey-80 */
    --color-text-subtle: var(--neutral-grey-80);

    /* Loading / waiter spinner color — unified across the whole web app */
    --color-spinner: var(--brand-secondary);

    /* Disabled states (from "How to apply colors" → Support) */
    --color-disabled-text: var(--neutral-grey-80);     /* grey-80 */
    --color-disabled-non-text: var(--neutral-grey-60); /* grey-60 */

    /* --- Neutral gray scale ---
       Mapped onto the Rebranding 2026 neutral swatches. */
    --gray-950: var(--neutral-black);
    --gray-900: var(--neutral-grey-100);
    --gray-800: var(--neutral-grey-90);
    --gray-700: var(--neutral-grey-90);
    --gray-600: var(--neutral-grey-80);
    --gray-500: var(--neutral-grey-70);
    --gray-400: var(--neutral-grey-50);
    --gray-300: var(--neutral-grey-40);
    --gray-250: var(--neutral-grey-40);
    --gray-200: var(--neutral-grey-30);
    --gray-150: var(--neutral-grey-30);
    --gray-100: var(--neutral-grey-30);
    --gray-75: var(--neutral-grey-20);
    --gray-50: var(--neutral-grey-10);

    --color-border: var(--neutral-grey-40);
    --color-border-light: var(--neutral-grey-30);

    /* Decorative neutral surfaces/borders (non-brand, kept as tokens
       so the whole app stays free of raw hex values). */
    --color-surface-warm: #f5f3f0;   /* warm light panel background */
    --color-surface-cream: #f5f1eb;  /* cream light background */
    --color-border-dashed: #e5eaed;  /* light dashed divider */
    --color-border-muted: #eae9e9;   /* muted light border */
    --color-border-cream: #efe4d3;   /* warm light border */
    --color-text-tan: #d18d33;       /* muted tan/brown text */
    --color-accent-blue: #337ab7;    /* legacy Bootstrap link blue */
    --color-shadow-blue: #7777ff;    /* bluish text-shadow accent */

    /* --- Typography ---
       Semantic font tokens. Swap the values here to change fonts
       across the whole app (e.g. for the 2026 rebranding).
       Rebranding 2026: Poppins is the single brand typeface. There is no
       brand fallback font — only the generic `sans-serif` is used until
       Poppins loads. */
    --font-family-base: "Poppins", sans-serif;
    --font-family-heading: "Poppins", sans-serif;
    --font-family-accent: "Poppins", sans-serif;
    --font-family-system: "Poppins", sans-serif;
    --font-size-base: 16px;

    /* Font-size scale. Change a value to re-scale that step everywhere. */
    --fs-xs: 10px;
    --fs-sm: 12px;
    --fs-base: 14px;
    --fs-md: 16px;
    --fs-lg: 18px;
    --fs-xl: 20px;
    --fs-2xl: 28px;
    --fs-3xl: 40px;
    --fs-4xl: 72px;

    /* Font-weight tokens. */
    --fw-normal: normal;
    --fw-bold: bold;

    /* Line-height tokens. */
    --lh-none: 1;
    --lh-base: 1.42857143;
    --lh-relaxed: 1.8;

    /* --- Radius --- */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;

    /* --- Sidebar background (Guide Book: Logo placement layout) ---
       Brand-green vertical gradient matching the dashboard hero/mini-card
       accents (brand-primary -> brand-primary-visual-support).
       Kept as a linear-gradient so it remains a background *image*,
       allowing `background-size` to keep the green limited to the 270px
       sidebar strip on `.bg_main`. A solid color would ignore
       `background-size` and flood the whole page. */
    --sidebar-gradient: linear-gradient(180deg, var(--brand-primary-visual-support), var(--brand-primary));
    --sidebar-item-active-bg: rgba(255, 255, 255, 0.14);
    --sidebar-text: var(--neutral-white);

    /* --- Focus ring (accessibility / WCAG) ---
       Visible keyboard-focus indicator used across interactive elements. */
    --focus-ring-color: var(--brand-primary);
    --focus-ring-width: 2px;
    --focus-ring-offset: 2px;
}

/* ============================================================
   High-contrast mode — Rebranding 2026 (Guide Book: Accessibility)
   ------------------------------------------------------------
   Re-defines the semantic tokens with stronger, higher-contrast
   values. Because the whole app is token-driven, overriding the
   tokens here re-skins every component for high-contrast users.

   Activation:
     1) Manual toggle — add class `hc` to <body>.
     2) System setting — `prefers-contrast: more`.
   ============================================================ */
.hc {
    /* Brand — use the darkest green for maximum contrast on white. */
    --brand-primary: var(--green-90);          /* #073325 */
    --brand-primary-dark: var(--green-90);
    --brand-primary-visual-support: var(--green-80);
    --brand-primary-light: var(--green-70);
    --brand-primary-hover: var(--neutral-black);
    --brand-primary-contrast: var(--neutral-white);

    --brand-secondary: var(--orange-80);       /* #901700 */
    --brand-secondary-dark: var(--orange-80);
    --brand-secondary-hover: var(--neutral-black);
    --brand-secondary-contrast: var(--neutral-white);

    /* Status — stronger, fully saturated feedback colors. */
    --color-danger: var(--red-50);
    --color-danger-strong: var(--orange-80);
    --color-danger-alt: var(--red-50);
    --color-error: var(--red-50);
    --color-success: var(--green-90);
    --color-btn-success: var(--green-90);
    --color-btn-danger: var(--red-50);

    /* Surfaces & text — pure black/white for maximum legibility. */
    --color-bg: var(--neutral-white);
    --color-surface: var(--neutral-white);
    --color-surface-alt: var(--neutral-grey-20);
    --color-surface-muted: var(--neutral-grey-20);

    --color-text: var(--neutral-black);
    --color-text-muted: var(--neutral-grey-100);
    --color-text-subtle: var(--neutral-grey-100);

    /* Borders — darker and more visible. */
    --color-border: var(--neutral-grey-100);
    --color-border-light: var(--neutral-grey-90);

    /* Disabled — keep a perceivable but clearly muted contrast. */
    --color-disabled-text: var(--neutral-grey-90);
    --color-disabled-non-text: var(--neutral-grey-70);

    /* Focus — thicker, black ring for strong visibility. */
    --focus-ring-color: var(--neutral-black);
    --focus-ring-width: 3px;
    --focus-ring-offset: 2px;
}

/* Respect the OS/browser "increase contrast" setting automatically. */
@media (prefers-contrast: more) {
    :root {
        --brand-primary: var(--green-90);
        --brand-primary-dark: var(--green-90);
        --brand-primary-visual-support: var(--green-80);
        --brand-primary-light: var(--green-70);
        --brand-primary-hover: var(--neutral-black);

        --brand-secondary: var(--orange-80);
        --brand-secondary-dark: var(--orange-80);
        --brand-secondary-hover: var(--neutral-black);

        --color-success: var(--green-90);
        --color-btn-success: var(--green-90);

        --color-surface: var(--neutral-white);
        --color-text: var(--neutral-black);
        --color-text-muted: var(--neutral-grey-100);
        --color-text-subtle: var(--neutral-grey-100);

        --color-border: var(--neutral-grey-100);
        --color-border-light: var(--neutral-grey-90);

        --focus-ring-color: var(--neutral-black);
        --focus-ring-width: 3px;
    }
}