/* levvr-tokens.css
   ============================================================================
   Design tokens mirrored from the React app's MUI theme:
     Frontend/src/theme/colors.ts
     Frontend/src/theme/theme.ts
     Frontend/src/theme/components.ts

   This file declares custom properties ONLY. It renders nothing, so it is safe
   to load on every page -- including the ones still using the old .login__*
   styles. That is deliberate: it lets each remaining auth page opt into the new
   look one <link> at a time without the token layer being rewritten.

   RULE: levvr-auth.css -- and any future levvr-*.css -- may only READ these.
   Values belong here and nowhere else.
   ============================================================================ */

:root {
  /* --- palette: cobalt (primary) ------------------------------------------
     theme.ts palette.primary. The app moved off coral (#9E515C) and onto
     cobalt in phase 3 of the UX modernization; Identity's login was left
     behind on the old coral, which is what this redesign corrects. */
  --levvr-primary: #4361EE;                        /* cobalt[500] = primary.main     */
  --levvr-primary-dark: #2842C7;                   /* cobalt[700] = primary.dark     */
  --levvr-primary-light: #4D7BF0;                  /* cobalt[400] = primary.light    */
  --levvr-primary-contrast: #FFFFFF;               /* getContrastText(#4361EE)       */
  --levvr-primary-a004: rgba(67, 97, 238, 0.04);   /* action.hoverOpacity on primary */
  --levvr-primary-a008: rgba(67, 97, 238, 0.08);   /* cobalt.A008 = action.selected  */
  --levvr-primary-a030: rgba(67, 97, 238, 0.3);    /* cobalt.A030 -- focus ring      */

  /* --- palette: steel (text / lines / surfaces) --- */
  --levvr-text-primary: #0D0628;                   /* steel[900] = text.primary      */
  --levvr-text-secondary: rgba(13, 6, 40, 0.63);   /* steel.A063 = text.secondary    */
  --levvr-text-disabled: rgba(13, 6, 40, 0.40);    /* steel.A040 = action.disabled   */
  --levvr-divider: rgba(13, 6, 40, 0.13);          /* steel.A013 = divider           */
  --levvr-action-hover: rgba(13, 6, 40, 0.04);     /* steel.A004 = action.hover      */
  --levvr-action-active: rgba(13, 6, 40, 0.59);    /* steel.A059 = action.active     */
  --levvr-outline: rgba(13, 6, 40, 0.21);          /* steel.A021 -- see note below   */
  --levvr-surface: #FFFFFF;                        /* white[100] = common.white      */
  --levvr-background: #F8F8F9;                     /* steel[50]; the app's page bg,
                                                      Frontend/src/index.less
                                                      `html body { background-color }` */

  /* --levvr-outline is components.ts MuiOutlinedInput.styleOverrides.notchedOutline
     .borderColor -- an explicit app override of MUI's default rgba(0,0,0,0.23).
     It is the resting border of every text field in the app. */

  /* --- palette: error ----------------------------------------------------
     theme.ts declares no `error` palette entry, so these are MUI's own
     defaults, and the alert pair is what MUI's Alert computes from them
     (darken(error.light, 0.6) on lighten(error.light, 0.9)). */
  --levvr-error: #d32f2f;                          /* error.main  */
  --levvr-error-dark: #c62828;                     /* error.dark  */
  --levvr-error-light: #ef5350;                    /* error.light */
  --levvr-error-a030: rgba(211, 47, 47, 0.3);      /* focus ring on an errored field */
  --levvr-error-alert-fg: #5F2120;                 /* darken(#ef5350, 0.6)  */
  --levvr-error-alert-bg: #FDEDED;                 /* lighten(#ef5350, 0.9) */

  /* --- typography --------------------------------------------------------
     theme.ts sets `typography.htmlFontSize: 14`, but nothing in the app sets
     `html { font-size: 14px }` -- there is no <CssBaseline/> mounted and no
     such rule in src/index.less. So createTypography's

         pxToRem = size => `${size / htmlFontSize * (fontSize / 14)}rem`
                         = `${size / 14}rem`

     resolves against a real 16px root, and EVERY variant renders
     16/14 = 1.142857x larger than stock MUI. body2 is 16px, not 14px.

     That is a known bug the app has deliberately deferred -- fixing it would
     move every input and heading height in the app at once. See
     Frontend/plans/ux-modernization-theme-de-override.md (backlog entry
     "htmlFontSize: 14 does nothing"). We reproduce it here so that Identity
     matches the app *as shipped*, which is the whole point of the exercise.

     >>> When the app fixes htmlFontSize, set --levvr-type-scale to 1.
     >>> Nothing else in this file or in levvr-auth.css needs to change.

     Second consequence of theme.ts, easy to get wrong: createTypography emits
     its letterSpacing values only when fontFamily is MUI's default full stack
     ('"Roboto", "Helvetica", "Arial", sans-serif'). theme.ts sets the bare
     string 'Roboto', so that whole branch is skipped and every variant is
     `letter-spacing: normal`. Do NOT use MUI's documented 0.00938em /
     0.01071em / 0.02857em -- they are not in effect in this app. */
  --levvr-type-scale: 1.142857;
  --levvr-font-family: 'Roboto', sans-serif;

  /* Roboto is loaded at 300;400;500;600;700. The app's
     Frontend/public/index.html still omits 600; Identity loads it so
     Welcome can be semibold without a synthesised face. */
  --levvr-fw-light: 300;
  --levvr-fw-regular: 400;
  --levvr-fw-medium: 500;
  --levvr-fw-semibold: 600;
  --levvr-fw-bold: 700;

  --levvr-fs-body1: calc(16px * var(--levvr-type-scale));    /* 18.286px -- the floating label      */
  --levvr-lh-body1: 1.5;
  --levvr-fs-body2: calc(14px * var(--levvr-type-scale));    /* 16.000px -- input text, alert text  */
  --levvr-lh-body2: 1.43;
  --levvr-fs-caption: calc(12px * var(--levvr-type-scale));  /* 13.714px -- helper text             */
  --levvr-lh-caption: 1.66;
  --levvr-fs-button: calc(14px * var(--levvr-type-scale));   /* 16.000px -- weight 500              */
  --levvr-lh-button: 1.75;
  --levvr-fs-h3: calc(48px * var(--levvr-type-scale));       /* 54.857px -- the logged-out title    */
  --levvr-lh-h3: 1.167;
  --levvr-fs-h4: calc(34px * var(--levvr-type-scale));       /* 38.857px -- the auth title          */
  --levvr-lh-h4: 1.235;
  --levvr-fs-h5: calc(24px * var(--levvr-type-scale));       /* 27.429px                            */
  --levvr-lh-h5: 1.334;
  --levvr-fs-h6: calc(20px * var(--levvr-type-scale));       /* 22.857px, weight 500                */
  --levvr-lh-h6: 1.6;
  --levvr-icon-medium: calc(24px * var(--levvr-type-scale)); /* 27.429px -- SvgIcon fontSize medium */

  /* MuiInputBase's root and input line-height, and the input's own height.
     Deliberately NOT scaled: it is an em multiplier, so it already tracks
     whatever font-size it lands on. This is what makes the field 56px tall
     (1.4375em x 16px = 23px, content-box, + 16.5px padding top and bottom). */
  --levvr-field-line: 1.4375em;

  /* --- shape / spacing / motion ------------------------------------------
     theme.ts overrides neither `shape` nor `borderRadius`, so this is
     @mui/system/createTheme/shape.js -- literally { borderRadius: 4 }. The
     app's pill buttons (borderRadius: '100px') were removed in phase 3, so
     square-ish 4px corners are the current house style. */
  --levvr-radius: 4px;
  --levvr-space: 8px;                              /* theme.spacing(1) */

  --levvr-ease-out: cubic-bezier(0, 0, 0.2, 1);    /* transitions.easing.easeOut  */
  --levvr-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --levvr-dur-shortest: 150ms;
  --levvr-dur-shorter: 200ms;                      /* the label's transition */
  --levvr-dur-short: 250ms;
}