/* =====================================================================
   ShiftPocket v0.4 - THEME TOKENS: "Electric"
   DESIGN PROTOTYPE ONLY. Not production code.

   Refinement of the v0.3 pearl / midnight / electric-blue direction:
   tighter vertical rhythm, a stricter type scale, softer shadows, and a
   shared surface language for both the mobile app and the admin console.

   The ONLY place this theme's values are defined. Replace this file to
   restyle every surface.

     [data-theme="electric"]                          theme-wide
     [data-theme="electric"][data-appearance="light"] pearl
     [data-theme="electric"][data-appearance="dark"]  midnight

   `data-appearance` is always resolved to light or dark by app/theme.js.
   ===================================================================== */

[data-theme="electric"] {

  /* -- Type ----------------------------------------------------------
     One sans-serif stack everywhere. Every fallback in the chain is a
     sans face and the chain ends in the generic `sans-serif`, so a
     missing font can never fall back to a serif. No other family is
     declared anywhere in the prototype except the monospace stack, which
     is used only for code samples in documentation panels. */
  --font-sans: "Inter", "Segoe UI", Roboto, "Helvetica Neue", Helvetica,
               Arial, "Noto Sans", "Liberation Sans", system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
               "Liberation Mono", monospace;

  /* A strict scale. Nothing in the prototype may use a size outside it. */
  --fs-hero:    2.875rem;   /* the one earnings figure on a screen */
  --fs-amount:  1.75rem;    /* secondary amounts, admin metrics      */
  --fs-title:   1.375rem;   /* screen titles, large time values      */
  --fs-heading: 1.0625rem;  /* section headings                      */
  --fs-body:    0.9375rem;  /* default reading size                  */
  --fs-sub:     0.8438rem;  /* supporting text, row subtitles        */
  --fs-label:   0.8125rem;  /* field labels, dock labels, buttons    */
  --fs-micro:   0.6875rem;  /* eyebrows, chips, axis ticks, badges   */

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-heavy:    800;

  --lh-tight: 1.05;
  --lh-snug:  1.3;
  --lh-body:  1.5;

  --ls-hero:  -0.035em;
  --ls-tight: -0.015em;
  --ls-wide:   0.085em;

  /* -- Spacing: 4px base --------------------------------------------- */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;
  --sp-4: 1rem;     --sp-5: 1.25rem;  --sp-6: 1.5rem;
  --sp-7: 1.75rem;  --sp-8: 2rem;     --sp-10: 2.5rem;  --sp-12: 3rem;

  --gutter: var(--sp-4);        /* tightened from v0.3's 20px */

  /* Vertical rhythm. v0.4 reduces these deliberately: v0.3 pushed the
     Add Shift form past one screen on a 390x844 device. */
  --rhythm-section: var(--sp-5);
  --rhythm-field:   var(--sp-3);
  --rhythm-group:   var(--sp-4);

  /* -- Shape ---------------------------------------------------------- */
  --r-xs: 0.375rem;  --r-sm: 0.5rem;   --r-md: 0.75rem;
  --r-lg: 1rem;      --r-xl: 1.25rem;  --r-2xl: 1.75rem;
  --r-pill: 999px;

  /* -- Controls ------------------------------------------------------- */
  --tap:          3rem;       /* 48px minimum primary target */
  --tap-min:      2.75rem;    /* 44px absolute floor         */
  --control-h:    3rem;
  --control-h-lg: 3.75rem;
  --focus-w:      3px;
  --focus-offset: 2px;
  --hairline:     1px;

  /* -- Floating dock -------------------------------------------------- */
  --dock-h:     3.75rem;
  --dock-inset: var(--sp-3);
  /* Bottom padding reserved in scrollers so the end of a list always
     clears the dock, and the dock plus a sticky action bar together. */
  --clear-dock:        6rem;
  --clear-dock-action: 10.5rem;
  --clear-action:      7rem;

  /* -- Glass: dock, overlays and sticky bars only ---------------------- */
  --blur-dock:    18px;
  --blur-overlay: 14px;
  --glass-sat:    150%;

  /* -- Motion --------------------------------------------------------- */
  --t-fast: 110ms;
  --t-base: 180ms;
  --t-slow: 280ms;
  --ease:     cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* -- Chart ---------------------------------------------------------- */
  --bar-w: 0.5625rem;
  --bar-r: var(--r-xs);
  --chart-h: 3.75rem;

  /* -- Appearance preview swatches (show both palettes at once) -------- */
  --preview-light: #F4F6FB;
  --preview-dark:  #0F1524;

  /* -- Admin layout ---------------------------------------------------- */
  --admin-rail: 15rem;
  --admin-max:  84rem;

  /* -- The console: a command header, a navigation rail, a workspace and a
        contextual panel. Every width is a token so one breakpoint changes
        the whole grid rather than six rules. ---------------------------- */
  --console-max:     112rem;
  --console-nav:     16rem;
  --console-context: 21rem;
  --console-head-h:  3.5rem;
  --console-gap:     var(--sp-5);
  --console-pad:     var(--sp-6);

  /* -- Motion, beyond the three durations above ------------------------
     `--t-enter` is for something arriving on screen, `--t-exit` for
     something leaving: an exit that takes as long as an entrance feels
     like the interface is reluctant to let go. */
  --t-enter: 220ms;
  --t-exit:  140ms;
  --ease-spring: cubic-bezier(0.34, 1.36, 0.64, 1);
  --lift-enter: 6px;      /* how far a panel travels as it arrives */
  --shimmer-t: 1.25s;     /* one pass of a skeleton's highlight    */

  /* -- The console's rhythm: an 8px grid, named once ------------------
     The shared sheets keep the 4px scale the mobile app needs. The
     console lays out on 8, so every gap, pad and inset in console.css
     comes from these and nothing is eyeballed. */
  --cs-1: 0.25rem;   /*  4px */
  --cs-2: 0.5rem;    /*  8px */
  --cs-3: 0.75rem;   /* 12px */
  --cs-4: 1rem;      /* 16px */
  --cs-5: 1.5rem;    /* 24px */
  --cs-6: 2rem;      /* 32px */
  --cs-7: 3rem;      /* 48px */
  --cs-8: 4rem;      /* 64px */

  /* -- The console's motion: four speeds, and nothing between them ----
     RESPONSE is contact (hover, press, focus); TRANSITION is a thing
     changing place; ARRIVAL is a view appearing; AMBIENT is the aura,
     slow enough that it is felt rather than watched. A fifth speed is
     a fifth opinion about how fast the interface is, so there isn't one. */
  --t-response: 140ms;
  --t-transition: 220ms;
  --t-arrival: 420ms;
  --t-ambient: 30s;
  --ease-emphasis: cubic-bezier(0.2, 0.8, 0.2, 1);
  --count-steps: 760ms;   /* how long a figure takes to reach its value */
  --stagger-step: 55ms;   /* between one arriving card and the next     */
  --marker-w: 3px;        /* the rail marker's own edge                 */
}

/* ---------------------------------------------------------------------
   LIGHT - pearl
   --------------------------------------------------------------------- */
[data-theme="electric"][data-appearance="light"] {

  --bg:          #F4F6FB;
  --bg-elevated: #FFFFFF;
  --bg-sunken:   #E9EEF6;
  --bg-glow-1:   rgba(21, 82, 240, 0.09);
  --bg-glow-2:   rgba(6, 182, 212, 0.07);

  --surface:        #FFFFFF;
  --surface-muted:  #F7F9FC;
  --surface-sunken: #EEF2F8;
  --surface-inset:  #F1F4FA;

  --glass:        rgba(255, 255, 255, 0.94);
  --glass-solid:  #FCFDFE;
  --glass-border: rgba(226, 232, 242, 0.9);
  --scrim:        rgba(9, 16, 32, 0.44);

  --fg:           #0B1220;
  --fg-2:         #3A4557;
  --fg-muted:     #5A6579;
  --fg-on-accent: #FFFFFF;

  --line:        #E2E8F2;
  --line-strong: #CBD4E3;

  --accent:       #1552F0;
  --accent-hover: #1142CC;
  --accent-ink:   #0E3FBF;
  --accent-wash:  rgba(21, 82, 240, 0.10);
  --accent-fg:    #FFFFFF;

  --neutral-btn:        #FFFFFF;
  --neutral-btn-border: #D5DEEC;
  --neutral-btn-fg:     #0B1220;

  --cyan:      #06B6D4;
  --cyan-ink:  #0B6480;
  --cyan-wash: rgba(6, 182, 212, 0.13);

  --focus:        #0B4FD1;
  --danger:       #C81E1E;
  --danger-ink:   #A81717;
  --danger-solid: #B91C1C;
  --danger-wash:  rgba(200, 30, 30, 0.09);
  --success:      #0E8F6F;
  --success-ink:  #0B6E56;
  --success-wash: rgba(14, 143, 111, 0.11);
  --warn:         #A85A00;
  --warn-ink:     #8A4A00;
  --warn-wash:    rgba(200, 120, 0, 0.12);

  --data-regular:  #1552F0;
  --data-overtime: #06B6D4;
  --data-bar-idle: #A9C0FB;
  --data-empty:    #DDE4EF;

  /* -- The console's two extra families ------------------------------
     VIOLET/MAGENTA is for IDENTITY and context: an administrator, an
     identity id, a member, the contextual panel's own accent. It is
     never an action colour, so it can never be mistaken for a button.
     EMERALD is health -- active, open, granted, succeeded -- and it is
     deliberately distinct from the turquoise used for data.
     Each `-ink` value is the one used on text, measured against its own
     surface rather than against white. */
  --violet:       #7C3AED;
  --violet-ink:   #5B21B6;
  --violet-wash:  rgba(124, 58, 237, 0.10);
  --violet-line:  rgba(124, 58, 237, 0.28);
  --magenta:      #C026D3;
  --magenta-ink:  #86198F;
  --magenta-wash: rgba(192, 38, 211, 0.10);

  --emerald:      #059669;
  --emerald-ink:  #046C4E;
  --emerald-wash: rgba(5, 150, 105, 0.11);
  --emerald-line: rgba(5, 150, 105, 0.3);

  --turquoise:      #0891B2;
  --turquoise-ink:  #0E6F87;
  --turquoise-wash: rgba(8, 145, 178, 0.11);

  /* Amber is the WARNING family, separate from `--warn` so a caution and a
     warning callout can differ without redefining either. */
  --amber:      #B45309;
  --amber-ink:  #92400E;
  --amber-wash: rgba(180, 83, 9, 0.12);
  --amber-line: rgba(180, 83, 9, 0.3);

  --console-bg:      #EEF1F8;
  --console-nav-bg:  #FFFFFF;
  --console-head-bg: rgba(255, 255, 255, 0.86);
  --console-ctx-bg:  #FFFFFF;
  --skeleton:        #E4EAF4;
  --skeleton-shine:  rgba(255, 255, 255, 0.72);

  /* The aura: two slow gradients behind the console, in the two families
     the console already uses. Defined here, in BOTH appearances, because
     a glow that exists only in dark is a glow that vanishes in light. */
  --console-aura-1: rgba(21, 82, 240, 0.16);
  --console-aura-2: rgba(124, 58, 237, 0.13);
  --console-ripple: rgba(11, 18, 32, 0.16);
  --console-glow:   0 0 28px -10px rgba(21, 82, 240, 0.5);
  --console-stripe: rgba(21, 82, 240, 0.35);

  --shadow-sm:   0 1px 2px rgba(11, 18, 32, 0.045);
  --shadow-md:   0 1px 3px rgba(11, 18, 32, 0.05), 0 6px 16px rgba(11, 18, 32, 0.05);
  --shadow-dock: 0 1px 4px rgba(11, 18, 32, 0.07), 0 10px 28px rgba(11, 18, 32, 0.12);
  --shadow-accent: 0 3px 12px rgba(21, 82, 240, 0.24);
}

/* ---------------------------------------------------------------------
   DARK - midnight
   --------------------------------------------------------------------- */
[data-theme="electric"][data-appearance="dark"] {

  --bg:          #060912;
  --bg-elevated: #0F1524;
  --bg-sunken:   #04070E;
  --bg-glow-1:   rgba(77, 130, 255, 0.15);
  --bg-glow-2:   rgba(34, 211, 238, 0.09);

  --surface:        #0F1524;
  --surface-muted:  #131A2B;
  --surface-sunken: #0A0F1B;
  --surface-inset:  #161E31;

  --glass:        rgba(20, 28, 47, 0.94);
  --glass-solid:  #151D2F;
  --glass-border: rgba(150, 175, 220, 0.14);
  --scrim:        rgba(2, 4, 9, 0.7);

  --fg:           #EEF2F9;
  --fg-2:         #BDC8DA;
  --fg-muted:     #9DACC4;
  --fg-on-accent: #04122E;

  --line:        #222D45;
  --line-strong: #33415F;

  --accent:       #5C8CFF;
  --accent-hover: #7BA3FF;
  --accent-ink:   #8FB2FF;
  --accent-wash:  rgba(92, 140, 255, 0.16);
  --accent-fg:    #04122E;

  --neutral-btn:        #18213A;
  --neutral-btn-border: #2C3A58;
  --neutral-btn-fg:     #EEF2F9;

  --cyan:      #22D3EE;
  --cyan-ink:  #67E8F9;
  --cyan-wash: rgba(34, 211, 238, 0.15);

  --focus:        #8CBEFF;
  --danger:       #FF8A82;
  --danger-ink:   #FFA79F;
  --danger-solid: #B3261E;
  --danger-wash:  rgba(255, 110, 95, 0.16);
  --success:      #34D9A6;
  --success-ink:  #6FE7C3;
  --success-wash: rgba(52, 217, 166, 0.14);
  --warn:         #F0B45C;
  --warn-ink:     #F7C87E;
  --warn-wash:    rgba(240, 180, 92, 0.15);

  --data-regular:  #5C8CFF;
  --data-overtime: #22D3EE;
  --data-bar-idle: #2F4A85;
  --data-empty:    #1C2740;

  /* The same two families on midnight. Lightened until each reads against
     `--surface` rather than against the light theme's white. */
  --violet:       #A78BFA;
  --violet-ink:   #C4B5FD;
  --violet-wash:  rgba(167, 139, 250, 0.16);
  --violet-line:  rgba(167, 139, 250, 0.32);
  --magenta:      #E879F9;
  --magenta-ink:  #F0ABFC;
  --magenta-wash: rgba(232, 121, 249, 0.16);

  --emerald:      #34D399;
  --emerald-ink:  #6EE7B7;
  --emerald-wash: rgba(52, 211, 153, 0.15);
  --emerald-line: rgba(52, 211, 153, 0.34);

  --turquoise:      #22D3EE;
  --turquoise-ink:  #67E8F9;
  --turquoise-wash: rgba(34, 211, 238, 0.15);

  --amber:      #FBBF24;
  --amber-ink:  #FCD34D;
  --amber-wash: rgba(251, 191, 36, 0.16);
  --amber-line: rgba(251, 191, 36, 0.34);

  --console-bg:      #070B15;
  --console-nav-bg:  #0C1120;
  --console-head-bg: rgba(12, 17, 32, 0.84);
  --console-ctx-bg:  #0C1120;
  --skeleton:        #162034;
  --skeleton-shine:  rgba(146, 174, 224, 0.12);

  --console-aura-1: rgba(34, 211, 238, 0.20);
  --console-aura-2: rgba(167, 139, 250, 0.18);
  --console-ripple: rgba(233, 240, 255, 0.22);
  --console-glow:   0 0 32px -8px rgba(34, 211, 238, 0.55);
  --console-stripe: rgba(34, 211, 238, 0.4);

  --shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md:   0 1px 3px rgba(0, 0, 0, 0.45), 0 6px 16px rgba(0, 0, 0, 0.36);
  --shadow-dock: 0 1px 4px rgba(0, 0, 0, 0.5), 0 10px 28px rgba(0, 0, 0, 0.55);
  --shadow-accent: 0 3px 12px rgba(21, 60, 160, 0.5);
}

/* ---------------------------------------------------------------------
   Opaque fallback where backdrop-filter is unsupported.
   Selector specificity matches the appearance blocks, otherwise this
   loses the cascade and never applies.
   --------------------------------------------------------------------- */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  [data-theme="electric"][data-appearance="light"],
  [data-theme="electric"][data-appearance="dark"] {
    --glass: var(--glass-solid);
    --blur-dock: 0px;
    --blur-overlay: 0px;
  }
}

/* ---------------------------------------------------------------------
   Reduced motion - a token override, not a per-component special case.
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  [data-theme="electric"] {
    --t-fast: 0ms; --t-base: 0ms; --t-slow: 0ms;
    --t-response: 0ms; --t-transition: 0ms; --t-arrival: 0ms;
    --count-steps: 0ms; --stagger-step: 0ms;
  }
}