/* ============================================================================
   OnTheButton design tokens
   ----------------------------------------------------------------------------
   Single source of truth for colour, type, spacing, radius and shadow.
   Linked from sit.master and login.master, so every page has these available.

   This file declares variables only - it sets no styles and changes nothing on
   its own. Components live in otb-components.css.

   THE RULE: no new hex value in a page <style> block. If a colour is missing
   here, add it here.

   ---- Source ----------------------------------------------------------------
   Three values come from the client's brand guide and are fixed:

       Dark purple        #402B56   (cmyk 83.92 / 90.42 / 33.3 / 31.03)
       Red                #E2231A
       Very light purple  #DFD9EF

   Everything else is derived from those on the same hue in OKLCH, so the ramp
   is perceptually even rather than hand-picked. Two things worth knowing:

   - The purple ramp's mid-tone computes to #5A2C83. The onboarding pages were
     already using #5B2B82, which is the same colour to the eye, so the ramp
     keeps that value - the brand geometry and the newest pages already agreed.
   - #6D3292, the old secure-area purple, sits 4.6 degrees off the official
     hue. That is the drift that made the secure area and the login page look
     subtly unrelated. It is retired; see the migration map at the foot.
   ============================================================================ */

:root {

    /* ---- Purple ------------------------------------------------------------
       Anchored on the official dark purple (600) and very light purple (100).
       500 is the interactive colour: buttons, links, focus, active nav.
       600 is the chrome colour: page headers, table headers, headings.       */

    --otb-purple-50:  #F5F2FA;   /* page tints, hover rows                    */
    --otb-purple-100: #DFD9EF;   /* OFFICIAL - panel grounds, borders on tint */
    --otb-purple-200: #CCBCE1;   /* dividers on tinted panels                 */
    --otb-purple-300: #AC90CC;   /* disabled interactive                      */
    --otb-purple-400: #815BAA;   /* hover on 500 when lightening              */
    --otb-purple-500: #5B2B82;   /* PRIMARY - actions, links, focus           */
    --otb-purple-600: #402B56;   /* OFFICIAL - headers, headings, chrome      */
    --otb-purple-700: #311E44;   /* pressed / active                          */
    --otb-purple-800: #221331;   /* deepest, gradient ends                    */

    /* Derived interactive states - do not hand-pick new purples for these.   */
    --otb-purple-hover:   var(--otb-purple-600);
    --otb-purple-active:  var(--otb-purple-700);
    --otb-focus-ring:     0 0 0 3px rgba(91, 43, 130, 0.28);

    /* The one house gradient. 29 pages had this hand-copied; now it is here. */
    --otb-gradient-header: linear-gradient(135deg, #402B56 0%, #5B2B82 100%);

    /* ---- Red ---------------------------------------------------------------
       The brand guide has exactly one warm colour, so red carries both the
       brand accent and the danger role. Keep them apart by FORM, not by hue:
       solid red = destructive confirm, outlined red = destructive trigger,
       red text = error. Benign primary actions stay purple. Mixing "go" and
       "stop" into one colour is what makes an interface feel careless.

       White on #E2231A is 4.68:1 - fine for button labels, too tight for small
       text. Red text on white uses --otb-danger-text (8.16:1).              */

    --otb-red:        #E2231A;   /* OFFICIAL - brand red, destructive solid   */
    --otb-red-hover:  #B81C14;
    --otb-red-text:   #A3001A;   /* red type on white/light grounds           */

    /* ---- Neutrals ----------------------------------------------------------
       Greys carry a slight purple bias (same 305 hue) so they sit with the
       brand rather than reading as a separate cold grey system.             */

    --otb-white:     #FFFFFF;
    --otb-grey-50:   #FBF9FC;    /* app background                            */
    --otb-grey-100:  #F3F1F5;    /* zebra rows, inset panels                  */
    --otb-grey-200:  #E6E3E9;    /* hairlines, table borders                  */
    --otb-grey-300:  #D2CFD6;    /* input borders at rest                     */
    --otb-grey-400:  #A6A3AB;    /* placeholder text, disabled                */
    --otb-grey-500:  #7C7881;    /* icons, tertiary text                      */
    --otb-grey-600:  #5D5962;    /* secondary text - 6.84:1 on white          */
    --otb-grey-700:  #44404A;    /* body text - 10.11:1 on white              */

    --otb-text:       var(--otb-grey-700);
    --otb-text-muted: var(--otb-grey-600);
    --otb-line:       var(--otb-grey-200);
    --otb-ground:     var(--otb-grey-50);
    --otb-surface:    var(--otb-white);

    /* ---- Status ------------------------------------------------------------
       Danger is the brand red. Warning, success and info are functional only -
       they are not brand colours - so they sit one chroma step quieter, which
       keeps the brand red the loudest thing on any screen.

       Use the tint + text pair for anything with words in it (all pass AAA on
       their own tint). The solids are for bars, dots and severity stripes -
       white on them is around 4:1, which is not enough for small labels.    */

    --otb-danger:        #E2231A;
    --otb-danger-text:   #A3001A;
    --otb-danger-tint:   #FFEBE6;
    --otb-danger-line:   #FFC7BD;

    /* ---- Brand orange -------------------------------------------------
       #FD5D00 is the brand orange. It was in the codebase all along -
       main.css .btn_bloodorange and GroupPicture's --gp-amber both used it -
       while #E15000 was a duller, wrong value at essentially the same hue.
       Unchanged, and reserved for brand use.

       White on it is only 3.11:1, so it never carries small white label
       text: stripes, dots and accents only. */
    --otb-orange:        #FD5D00;

    /* ---- Warning / amber ----------------------------------------------
       #FCA501, the brand amber. It is what the Group Picture uses, what the
       nav highlights on hover, and what every warning state takes.

       It also settles the RAG question the earlier provisional value was
       standing in for: it sits 42.6 degrees off the brand red and 0.20
       lighter, so amber and red separate by hue AND by lightness. That
       second axis is what still reads under red-green colour blindness.

       White on it is only 2:1, so it never carries white text - fills,
       stripes and dots only. Words go in the tint + text pair. */
    --otb-warning:       #FCA501;
    --otb-warning-text:  #8F4400;   /* 7.01:1 on white, 6.22:1 on its tint  */
    --otb-warning-tint:  #FFEFDC;
    --otb-warning-line:  #F7D0A1;

    /* Brand green. White on it is 1.87:1, so it is a fill colour only -
       ticks, stripes, dots. Text uses the darker partner. */
    --otb-success:       #7DD320;
    --otb-success-text:  #316C00;   /* 6.41:1 on white, 5.77:1 on its tint  */
    --otb-success-tint:  #EAF7E2;
    --otb-success-line:  #C4E3B0;

    /* Brand blue, for informational states. 3.51:1 against white, so it is
       fine for a stripe or a large label but not for body text. */
    --otb-info:          #8282C9;
    --otb-info-text:     #545291;   /* 7.02:1 on white, 6.20:1 on its tint  */
    --otb-info-tint:     #EEF0FF;
    --otb-info-line:     #D0D2FF;

    /* ---- Type --------------------------------------------------------------
       Nunito Sans is loaded at 400, 700 and 900 ONLY (see main.css). Asking
       for 800 rounds UP to 900 and renders heavier than intended - there are
       20 such declarations in the app today. Use these three weights.

       Six sizes, no more. 12.5px, 11.5px and 0.7rem are not steps.         */

    --otb-font: 'Nunito Sans', 'Segoe UI', system-ui, sans-serif;

    --otb-text-xs:   12px;   /* meta, table captions, helper text            */
    --otb-text-sm:   14px;   /* secondary text, dense table cells            */
    --otb-text-base: 16px;   /* body, inputs, buttons                        */
    --otb-text-lg:   20px;   /* panel headings, card titles                  */
    --otb-text-xl:   24px;   /* section headings                             */
    --otb-text-2xl:  28px;   /* page title in the purple header              */

    --otb-weight-normal: 400;
    --otb-weight-bold:   700;
    --otb-weight-black:  900;   /* sparingly - display only                  */

    --otb-leading-tight: 1.25;
    --otb-leading-body:  1.55;

    /* ---- Space -------------------------------------------------------------
       4px base. Page header padding is 30px (--otb-space-7) and content is
       inset 30px from the edges, which is the existing house measurement.  */

    --otb-space-1:  4px;
    --otb-space-2:  8px;
    --otb-space-3:  12px;
    --otb-space-4:  16px;
    --otb-space-5:  20px;
    --otb-space-6:  24px;
    --otb-space-7:  30px;
    --otb-space-8:  40px;

    /* ---- Radius ------------------------------------------------------------
       Three values, replacing the 18 in use today.                          */

    --otb-radius-control: 8px;     /* buttons, inputs, small chips           */
    --otb-radius-card:    12px;    /* cards, panels, modals                  */
    --otb-radius-pill:    999px;   /* badges, status pills                   */

    /* ---- Elevation ---------------------------------------------------------
       Two, replacing the 37 in use today. The raised value is the login
       card's shadow, which is the treatment the rest of the app is moving to.
       Both are tinted with the brand purple rather than neutral black.     */

    --otb-shadow-resting: 0 1px 2px rgba(36, 27, 46, 0.06),
                          0 4px 12px rgba(36, 27, 46, 0.06);
    --otb-shadow-raised:  0 24px 60px rgba(24, 10, 40, 0.30);
}

/* ============================================================================
   Breakpoints - reference only

   CSS variables cannot be used inside a @media query, so these cannot be
   tokens. They are written down here because the app currently responds at 29
   different widths, several of which overlap and contradict each other.

   New work uses these four and nothing else:

       640px    phone / small tablet
       1024px   tablet landscape - below this, columns stack
       1314px   desktop - two-column list layouts become side by side
       1600px   wide desktop

   1314px is not arbitrary: SafeguardingLogging.css stacks .title-column and
   .comment-column at flex:1 1 100% all the way to 1313px, so a desktop rule
   written at the conventional 1024px lands inside a stacked layout and forces
   two full-width columns onto one row.
   ============================================================================ */

/* ============================================================================
   Migration map - old value to token

       #6D3292  ->  var(--otb-purple-500)     retired, 4.6 deg off brand hue
       #5B2B82  ->  var(--otb-purple-500)
       #402B56  ->  var(--otb-purple-600)
       #5A2876  ->  var(--otb-purple-hover)   one of five hand-picked hovers
       #5A3D75  ->  var(--otb-purple-hover)
       #5A3D7A  ->  var(--otb-purple-hover)
       #331F45  ->  var(--otb-purple-700)
       #6A3494  ->  var(--otb-purple-500)     login gradient top
       #DFD9EF  ->  var(--otb-purple-100)

       #E15000  ->  retired - not in the brand guide. Foundation's
                    .button.primary orange. Primary actions are purple.
       #E2231A  ->  var(--otb-red)
       #DC3545  ->  var(--otb-danger)
       #A3001A  ->  var(--otb-danger-text)
       #28A745  ->  var(--otb-success)
       #198754  ->  var(--otb-success)
       #FFC107  ->  var(--otb-warning)
       #FCA501  ->  var(--otb-warning)
       #E15000  ->  var(--otb-orange)   the right hue, the wrong value

       #444444 / #333 / #666 / #999  ->  the --otb-grey-* ramp
   ============================================================================ */