/* Gelbgroup Carbon: the tokens (docs/ui-system.md).

   Two tiers. The palette names colours; the semantic tokens, with IBM Carbon's names, say what a colour is for.
   Components use only the semantic tokens. The older module stylesheets were retokened onto the palette, and go
   when their modules move onto the components.

   Every text pair here holds WCAG AA (4.5:1). Light only for now: a dark theme is another block of semantic
   tokens, nothing else. */

:root {
    /* ---------------------------------------------------------------------------------------------- palette */
    --gc-navy: #29414C;
    --gc-teal: #4E767D;
    --gc-teal-hover: #5A8891;
    --gc-teal-dark: #2E777E;
    --gc-teal-10: #F0F7F8;
    --gc-teal-20: #E8F0F2;
    --gc-teal-30: #DDE5E7;
    --gc-white: #FFFFFF;
    --gc-black: #000000;

    /* Warm greys, lightest first. */
    --gc-grey-02: #F8F8F8;
    --gc-grey-05: #F5F5F5;
    --gc-grey-10: #F0EEEC;
    --gc-grey-15: #E9E9E9;
    --gc-grey-20: #D0CEC9;
    --gc-grey-30: #C6BFBA;
    --gc-grey-50: #938C85;   /* decoration only: 3.3:1 on white, never text */
    --gc-grey-60: #6B665F;
    --gc-grey-65: #77716A;
    --gc-grey-70: #55534F;

    --gc-info: #5A8E9C;      /* 3.6:1 on white: rules and icons; text and solid tags use info-text */
    --gc-info-text: #3D6E7B;
    --gc-info-10: #EEF4F6;
    --gc-success: #2D8A4E;   /* 4.3:1 on white: rules and icons; text and solid tags use success-text */
    --gc-success-text: #257A43;
    --gc-success-10: #EAF5EE;
    --gc-warning: #D4AE2F;   /* navy text on it, never white */
    --gc-warning-text: #6B5A10;
    --gc-warning-10: #FBF6E6;
    --gc-error: #C42322;
    --gc-error-hover: #D02D2C;
    --gc-error-10: #FDF0F0;

    /* Charts: the brand's secondary palette, always in this order. Goldenrod and jade always with a label. */
    --gc-chart-01: #0C86A3;
    --gc-chart-02: #D4AE2F;
    --gc-chart-03: #E52B2A;
    --gc-chart-04: #258843;
    --gc-chart-05: #69BC85;

    /* ------------------------------------------------------------------------------------- semantic: colour */
    --gc-background: var(--gc-grey-05);
    --gc-layer-01: var(--gc-white);
    --gc-layer-02: var(--gc-grey-10);
    --gc-layer-hover: var(--gc-grey-02);
    --gc-layer-selected: var(--gc-teal-10);
    --gc-layer-accent: var(--gc-teal-30);       /* avatars with initials */
    --gc-shell: var(--gc-navy);
    --gc-overlay: rgba(41, 65, 76, 0.8);

    --gc-text-primary: var(--gc-navy);
    --gc-text-secondary: var(--gc-grey-70);
    --gc-text-helper: var(--gc-grey-60);
    --gc-text-accent: var(--gc-teal);
    --gc-text-on-color: var(--gc-white);
    --gc-text-on-shell-muted: var(--gc-grey-30);
    --gc-text-disabled: var(--gc-grey-50);
    --gc-text-error: var(--gc-error);
    --gc-link: var(--gc-teal);
    --gc-link-hover: var(--gc-navy);

    --gc-button-primary: var(--gc-teal);
    --gc-button-primary-hover: var(--gc-teal-hover);
    --gc-button-secondary: var(--gc-grey-60);
    --gc-button-secondary-hover: var(--gc-grey-65);
    --gc-button-danger: var(--gc-error);
    --gc-button-danger-hover: var(--gc-error-hover);
    --gc-button-disabled: var(--gc-grey-15);
    --gc-focus: var(--gc-navy);

    --gc-border-subtle: var(--gc-grey-15);
    --gc-border-strong: var(--gc-grey-30);
    --gc-border-tile: var(--gc-grey-20);
    --gc-border-accent: var(--gc-teal);
    --gc-border-inverse: var(--gc-navy);
    --gc-border-error: var(--gc-error);

    --gc-support-error: var(--gc-error);
    --gc-support-error-subtle: var(--gc-error-10);
    --gc-support-success: var(--gc-success);
    --gc-support-success-text: var(--gc-success-text);
    --gc-support-success-subtle: var(--gc-success-10);
    --gc-support-warning: var(--gc-warning);
    --gc-support-warning-text: var(--gc-warning-text);
    --gc-support-warning-subtle: var(--gc-warning-10);
    --gc-support-info: var(--gc-info);
    --gc-support-info-text: var(--gc-info-text);
    --gc-support-info-subtle: var(--gc-info-10);
    --gc-support-new: var(--gc-teal-dark);

    /* ------------------------------------------------------------------------- semantic: shape, space, type */
    --gc-radius: 0;
    --gc-shadow-01: 0 2px 8px rgba(41, 65, 76, 0.08);    /* tables, panels, tiles */
    --gc-shadow-02: 0 6px 20px rgba(41, 65, 76, 0.12);   /* a tile, hovered */
    --gc-shadow-03: 0 8px 32px rgba(41, 65, 76, 0.30);   /* modals and flyouts */

    --gc-spacing-01: 0.125rem;   /*  2px */
    --gc-spacing-02: 0.25rem;    /*  4px */
    --gc-spacing-03: 0.5rem;     /*  8px */
    --gc-spacing-04: 0.75rem;    /* 12px */
    --gc-spacing-05: 1rem;       /* 16px */
    --gc-spacing-06: 1.5rem;     /* 24px */
    --gc-spacing-07: 2rem;       /* 32px */
    --gc-spacing-08: 2.5rem;     /* 40px */
    --gc-spacing-09: 3rem;       /* 48px */
    --gc-spacing-10: 4rem;       /* 64px */

    --gc-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --gc-font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Consolas, monospace;
    --gc-tracking-caps: 1px;     /* uppercase labels and buttons */
    --gc-tracking-heading: 0.5px;
}