/*
 * Classter Brand Tokens — 2026 guidelines
 * Source: classter-brand-guidelines (Brand Guidelines 2026.pdf)
 *
 * Strategy for this portal:
 *   - Brand permits both dark and light layouts.
 *   - For long forms we use light surfaces (Snow Gray / White) for legibility,
 *     dark navbar/footer for brand identity, Crimson Red for all CTAs.
 */

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

:root {
  /* ---- Primary Palette ---- */
  --classter-crimson:        #D02222;
  --classter-scarlet:        #E92C2C;
  --classter-black:          #000000;
  --classter-eerie:          #242323;
  --classter-jet:            #2E2E2E;
  --classter-snow:           #EDEFEF;
  --classter-white:          #FFFFFF;

  /* ---- Secondary Palette ---- */
  --classter-silver:         #C7C9CB;
  --classter-wisteria:       #B4ABD8;
  --classter-vista:          #7CA2E5;
  --classter-steel:          #B0BDDF;

  /* ---- Logo render colors ---- */
  --classter-logo-deep-red:  #BA212B;
  --classter-logo-dark-red:  #7B1214;

  /* ---- Semantic tokens (use these, not the raw colors) ---- */
  --bg-page:                 var(--classter-snow);
  --bg-surface:              var(--classter-white);
  --bg-surface-alt:          #F7F8F8;
  --bg-nav:                  var(--classter-eerie);
  --bg-footer:               var(--classter-black);

  --text-heading:            var(--classter-black);
  --text-body:               var(--classter-jet);
  --text-muted:              #6B6E70;
  --text-on-dark:            var(--classter-snow);
  --text-on-crimson:         var(--classter-white);

  --border-default:          #D8DBDC;
  --border-strong:           var(--classter-silver);
  --border-focus:            var(--classter-crimson);

  --cta-bg:                  var(--classter-crimson);
  --cta-text:                var(--classter-white);
  --cta-hover-bg:            var(--classter-scarlet);
  --cta-disabled-bg:         var(--classter-silver);

  --link:                    var(--classter-crimson);
  --link-hover:              var(--classter-scarlet);

  /* ---- Status (IDP workflow) ---- */
  --status-draft-bg:         #ECECEE;
  --status-draft-fg:         #5A5D5F;
  --status-submitted-bg:     #DEE7F7;
  --status-submitted-fg:     #2E5BA7;
  --status-review-bg:        #FBE9C6;
  --status-review-fg:        #8A5A12;
  --status-approved-bg:      #D6F0DF;
  --status-approved-fg:      #226A3C;
  --status-active-bg:        #FADADA;
  --status-active-fg:        #8E1818;
  --status-completed-bg:     #E0E0E1;
  --status-completed-fg:     #2E2E2E;
  --status-inactive-bg:      #ECECEE;
  --status-inactive-fg:      #8A8E91;

  /* ---- Typography ---- */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
               'Helvetica Neue', Arial, sans-serif;

  /* ---- Effects ---- */
  --shadow-card:        0 1px 3px rgba(0,0,0,0.06), 0 2px 8px rgba(0,0,0,0.04);
  --shadow-card-hover:  0 4px 14px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.06);
  --shadow-nav:         0 1px 0 rgba(0,0,0,0.4);

  /* ---- Radii ---- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  /* ---- Spacing scale ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* ---- Layout ---- */
  --content-max-width: 960px;
  --content-max-width-wide: 1180px;
}