/* ============================================================
   SSB Developer Portal — Design Tokens
   Maps SSB semantic tokens to SSB authoritative palette.
   Load this file second, after southState.bootstrap.css.
   ============================================================ */

/* CeraPro @font-face declarations */
@font-face { font-family: 'CeraPro'; src: url('../fonts/CeraPro-Thin.ttf') format('truetype'); font-weight: 200; font-style: normal; }
@font-face { font-family: 'CeraPro'; src: url('../fonts/CeraPro-ThinItalic.ttf') format('truetype'); font-weight: 200; font-style: italic; }
@font-face { font-family: 'CeraPro'; src: url('../fonts/CeraPro-Light.ttf') format('truetype'); font-weight: 300; font-style: normal; }
@font-face { font-family: 'CeraPro'; src: url('../fonts/CeraPro-LightItalic.ttf') format('truetype'); font-weight: 300; font-style: italic; }
@font-face { font-family: 'CeraPro'; src: url('../fonts/CeraPro-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; }
@font-face { font-family: 'CeraPro'; src: url('../fonts/CeraPro-Italic.ttf') format('truetype'); font-weight: 400; font-style: italic; }
@font-face { font-family: 'CeraPro'; src: url('../fonts/CeraPro-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; }
@font-face { font-family: 'CeraPro'; src: url('../fonts/CeraPro-MediumItalic.ttf') format('truetype'); font-weight: 500; font-style: italic; }
@font-face { font-family: 'CeraPro'; src: url('../fonts/CeraPro-Bold.ttf') format('truetype'); font-weight: 600; font-style: normal; }
@font-face { font-family: 'CeraPro'; src: url('../fonts/CeraPro-BoldItalic.ttf') format('truetype'); font-weight: 600; font-style: italic; }
@font-face { font-family: 'CeraPro'; src: url('../fonts/CeraPro-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; }
@font-face { font-family: 'CeraPro'; src: url('../fonts/CeraPro-BoldItalic.ttf') format('truetype'); font-weight: 700; font-style: italic; }
@font-face { font-family: 'CeraPro'; src: url('../fonts/CeraPro-Black.ttf') format('truetype'); font-weight: 800; font-style: normal; }
@font-face { font-family: 'CeraPro'; src: url('../fonts/CeraPro-BlackItalic.ttf') format('truetype'); font-weight: 800; font-style: italic; }

:root {
    /* --- SSB Authoritative Palette ---------------------------------- */
    --ssb-primary-blue:    #002D72;
    --ssb-gold:            #FFBF3F;
    --ssb-bright-blue:     #0960BB;
    --ssb-dark-gray:       #4C4C4C;
    --ssb-light-gray:      #F3F3F3;
    --ssb-white:           #FFFFFF;

    /* --- SSB Semantic Tokens — mapped to SSB palette --------------- */
    --ssb-navy:           #002D72;
    --ssb-mid-navy:       rgba(0, 45, 114, 0.82);
    --ssb-accent:         #0960BB;
    --ssb-success:        #198754;
    --ssb-warning:        #FFBF3F;
    --ssb-error:          #DC3545;
    --ssb-light-bg:       #F3F3F3;
    --ssb-border:         #E0E0E0;
    --ssb-text:           #4C4C4C;
    --ssb-gray:           rgba(76, 76, 76, 0.65);

    /* --- Interaction state variants --------------------------------- */
    --ssb-navy-dark:      #001a42;   /* navy hover/pressed */
    --ssb-navy-pressed:   #000d21;
    --ssb-accent-dark:    #074d91;   /* accent hover/pressed */
    --ssb-accent-pressed: #053e75;
    --ssb-gold-dark:      #e6a800;   /* gold hover/pressed */
    --ssb-gold-text:      #7a5c00;   /* WCAG AA text on gold bg (4.6:1) */
    --ssb-disabled-bg:    #F0F0F0;
    --ssb-disabled-text:  #A0A0A0;
    --ssb-disabled-border:#D0D0D0;

    /* --- Status colours --------------------------------------------- */
    --ssb-status-operational: #4ade80;  /* uptime / live indicator */

    /* --- Dark surface / code tokens --------------------------------- */
    --ssb-code-chrome:    #1e293b;   /* code tab bar background */
    --ssb-code-bg:        #0f172a;   /* code block background */
    --ssb-response-bg:    #0B1C36;   /* JSON response block background */
    --ssb-code-text:      #e2e8f0;   /* code body text */
    --ssb-code-highlight: #93C5FD;   /* accent colour inside code / hero label */

    /* --- Dark surface link tokens ----------------------------------- */
    --ssb-footer-dark-link: #B0B8C4; /* link in dark footer — WCAG AA 4.8:1 on navy */

    /* --- Shape / corner radius ramp --------------------------------- */
    --radius-none: 0px;
    --radius-sm:   2px;
    --radius-md:   4px;
    --radius-lg:   8px;
    --radius-xl:   12px;
    --radius-pill: 9999px;

    /* --- Elevation / shadow ramp (Fluent 2) ------------------------- */
    --shadow-2:  0 1px 2px rgba(0,0,0,0.12);
    --shadow-4:  0 2px 4px rgba(0,0,0,0.14), 0 0 2px rgba(0,0,0,0.12);
    --shadow-8:  0 4px 8px rgba(0,0,0,0.14), 0 0 2px rgba(0,0,0,0.12);
    --shadow-16: 0 8px 16px rgba(0,0,0,0.14), 0 0 2px rgba(0,0,0,0.12);

    /* --- Surface / canvas hierarchy (Fluent depth) ----------------- */
    --ssb-canvas:         var(--ssb-light-bg);       /* page background / canvas */
    --ssb-surface:        #FFFFFF;                   /* raised card / section surface */
    --ssb-surface-alt:    rgba(9, 96, 187, 0.04);    /* accent-tinted alt section */
    --ssb-surface-nested: rgba(0, 0, 0, 0.025);      /* inset surface inside a white card */

    /* --- Motion / transition durations ------------------------------ */
    --motion-fast:   100ms ease;
    --motion-normal: 200ms ease;
    --motion-slow:   300ms ease;

    /* --- Bootstrap 5 CSS variable overrides ------------------------- */
    --bs-body-font-family:    'CeraPro', Arial, 'Helvetica Neue', sans-serif;
    --bs-body-color:          #4C4C4C;
    --bs-body-bg:             #FFFFFF;
    --bs-primary:             #FFBF3F;
    --bs-primary-rgb:         255, 191, 63;
    --bs-secondary:           #F3F3F3;
    --bs-info:                #0960BB;
    --bs-info-rgb:            9, 96, 187;
    --bs-warning:             #FFBF3F;
    --bs-warning-rgb:         255, 191, 63;
    --bs-dark:                #4C4C4C;
    --bs-dark-rgb:            76, 76, 76;
    --bs-link-color:          #0960BB;
    --bs-link-hover-color:    #002D72;
    --bs-border-radius:       var(--radius-md);
    --bs-border-radius-sm:    var(--radius-sm);
    --bs-border-radius-lg:    var(--radius-lg);
    --bs-border-radius-xl:    var(--radius-xl);
    --bs-border-radius-xxl:   var(--radius-xl);
    --bs-border-color:        #E0E0E0;
}