/* =============================================================================
	Shiftora design tokens.

	Color comes from the logo: an indigo interior (#5460e4) over deep navy
	letterforms (#0c183c). The neutral ramp is tinted toward the navy, and neither
	#000 nor #fff appears in the neutrals.

	The accent carries a subtle gradient within the same hue family. Flat fills stay
	available where the gradient would compete with content.

	Layering: raw ramp -> semantic aliases -> component tokens. Components read only
	the semantic or component layer, never a raw ramp value.
	============================================================================= */

/*
 * The document root, with every token carrying a `shiftora-` prefix.
 *
 * Scoping to a wrapper breaks anything rendered outside it (a toast appended to
 * `body`), and unprefixed names on `:root` collide with themes that declare the same
 * variable. Namespaced names on a plain `:root` avoid both without a specificity fight.
 */
:root {

  /* =========================================================================
	  1. RAW RAMP
	  ========================================================================= */

  /*
   * Neutrals, tinted toward the brand navy so the darkest steps match the logo
   * instead of reading as generic gray.
   */
  --shiftora-n-0:   #ffffff;
  --shiftora-n-50:  #f7f8fb;
  --shiftora-n-100: #eef0f6;
  --shiftora-n-150: #e2e5ee;
  --shiftora-n-200: #d3d8e4;
  --shiftora-n-300: #bcc2d4;
  --shiftora-n-400: #949cb4;
  --shiftora-n-500: #6d7590;
  --shiftora-n-600: #515872;
  --shiftora-n-700: #3b4257;
  --shiftora-n-800: #262c3d;
  --shiftora-n-900: #0c183c;

  /* Indigo, the wordmark interior. */
  --shiftora-blue-50:  #eef0fd;
  --shiftora-blue-100: #dfe3fb;
  --shiftora-blue-200: #c3c9f6;
  --shiftora-blue-300: #9fa8ef;
  --shiftora-blue-400: #7885e9;
  --shiftora-blue-500: #5460e4;
  --shiftora-blue-600: #4450d4;
  --shiftora-blue-700: #3742b4;
  --shiftora-blue-800: #2c348f;

  /* Teal-green, for a completed and verified state. */
  --shiftora-green-50:  #eef7f5;
  --shiftora-green-100: #d3ebe6;
  --shiftora-green-200: #a8d6cc;
  --shiftora-green-300: #7cc0b1;
  --shiftora-green-400: #54a897;
  --shiftora-green-500: #3d9182;
  --shiftora-green-600: #317468;
  --shiftora-green-700: #295c53;

  /* Amber, for something that needs attention but has not failed. */
  --shiftora-amber-50:  #fdf6e9;
  --shiftora-amber-100: #fae9c7;
  --shiftora-amber-200: #f5d493;
  --shiftora-amber-300: #eebb60;
  --shiftora-amber-400: #dda139;
  --shiftora-amber-500: #c4841f;
  --shiftora-amber-600: #a06818;
  --shiftora-amber-700: #7d5115;

  /* Red, for a refusal or a failure. Nothing else uses it. */
  --shiftora-red-50:  #fdf1f1;
  --shiftora-red-100: #fbe0e0;
  --shiftora-red-200: #f6c6c6;
  --shiftora-red-300: #eda0a0;
  --shiftora-red-400: #df7070;
  --shiftora-red-500: #cf4b4b;
  --shiftora-red-600: #b23636;
  --shiftora-red-700: #922b2b;

  /* =========================================================================
	  2. SURFACES
	  =========================================================================
	  Separated by border plus a small step in lightness, not by shadow. Shadow is
	  reserved for things that float above the page.
  ========================================================================= */

  --shiftora-color-bg:              #f4f6fb;
  --shiftora-color-bg-subtle:       #eceff7;
  --shiftora-color-bg-surface:      #fafbfd;
  --shiftora-color-bg-surface-alt:  #f1f3f8;
  --shiftora-color-bg-inset:        #e9ecf3;
  --shiftora-color-bg-input:        #ffffff;
  --shiftora-color-bg-raised:       #ffffff;

  --shiftora-color-border:          #dfe3ec;
  --shiftora-color-border-light:    #e9ecf3;
  --shiftora-color-border-strong:   #c6ccdb;
  --shiftora-color-border-focus:    var(--shiftora-blue-500);

  /* =========================================================================
	  3. TEXT
	  =========================================================================
	  Always dark. Never the accent, which is reserved for interactive and active
	  states, so a link does not compete with a selected nav row.
  ========================================================================= */

  --shiftora-color-text:           var(--shiftora-n-800);
  --shiftora-color-text-secondary: var(--shiftora-n-600);
  --shiftora-color-text-muted:     var(--shiftora-n-500);
  --shiftora-color-text-disabled:  var(--shiftora-n-400);
  --shiftora-color-text-inverse:   #ffffff;
  --shiftora-color-text-link:      var(--shiftora-blue-600);
  --shiftora-color-text-link-hover:var(--shiftora-blue-700);
  --shiftora-color-text-mono:      var(--shiftora-n-700);
  --shiftora-color-text-mono-muted:var(--shiftora-n-500);

  /* =========================================================================
	  4. STATUS
	  =========================================================================
	  Semantic only. Each carries a text, a background and a border, so a status
	  panel is legible without relying on color alone.
  ========================================================================= */

  --shiftora-color-success:        var(--shiftora-green-400);
  --shiftora-color-success-text:   var(--shiftora-green-700);
  --shiftora-color-success-bg:     var(--shiftora-green-50);
  --shiftora-color-success-border: var(--shiftora-green-200);

  --shiftora-color-warning:        var(--shiftora-amber-400);
  --shiftora-color-warning-text:   var(--shiftora-amber-700);
  --shiftora-color-warning-bg:     var(--shiftora-amber-50);
  --shiftora-color-warning-border: var(--shiftora-amber-200);

  --shiftora-color-error:          var(--shiftora-red-500);
  --shiftora-color-error-text:     var(--shiftora-red-700);
  --shiftora-color-error-bg:       var(--shiftora-red-50);
  --shiftora-color-error-border:   var(--shiftora-red-200);

  --shiftora-color-info:           var(--shiftora-blue-500);
  --shiftora-color-info-text:      var(--shiftora-blue-700);
  --shiftora-color-info-bg:        var(--shiftora-blue-50);
  --shiftora-color-info-border:    var(--shiftora-blue-200);

  /* =========================================================================
	  5. INTERACTIVE
	  =========================================================================
	  The accent, budgeted at a small share of the surface: primary buttons, the
	  active nav row, links, and focus.
  ========================================================================= */

  --shiftora-color-primary:        var(--shiftora-blue-500);
  --shiftora-color-primary-hover:  var(--shiftora-blue-600);
  --shiftora-color-primary-active: var(--shiftora-blue-700);
  --shiftora-color-primary-subtle: var(--shiftora-blue-50);
  --shiftora-color-primary-border: var(--shiftora-blue-200);
  --shiftora-color-on-primary:     #ffffff;

  /* ── Gradients ─────────────────────────────────────────────────────────
     Subtle shifts within the indigo family. The glow is the same hue at low
     opacity, used for hover halos. */
  --shiftora-gradient-primary:     linear-gradient(135deg, #6370ee 0%, #4450d4 100%);
  --shiftora-gradient-primary-hover: linear-gradient(135deg, #5460e4 0%, #3742b4 100%);
  --shiftora-gradient-primary-active: linear-gradient(135deg, #4a56d8 0%, #2c348f 100%);
  --shiftora-gradient-subtle:      linear-gradient(135deg, #f7f8fb 0%, #eef0fd 100%);
  --shiftora-gradient-surface:     linear-gradient(180deg, #ffffff 0%, #f7f8fb 100%);
  --shiftora-gradient-header:      linear-gradient(135deg, #0c183c 0%, #1a2550 60%, #252f5a 100%);
  --shiftora-gradient-accent-line: linear-gradient(90deg, #5460e4, #7885e9, #5460e4);
  --shiftora-glow-primary:         0 4px 16px rgba(84, 96, 228, 0.20), 0 1px 4px rgba(84, 96, 228, 0.12);
  --shiftora-glow-primary-hover:   0 6px 24px rgba(84, 96, 228, 0.28), 0 2px 6px rgba(84, 96, 228, 0.16);

  --shiftora-color-focus-ring: rgba(84, 96, 228, 0.28);

  --shiftora-color-card-bg:           var(--shiftora-color-bg-surface);
  --shiftora-color-card-bg-hover:     var(--shiftora-color-bg-surface-alt);
  --shiftora-color-card-border:       var(--shiftora-color-border);
  --shiftora-color-card-border-hover: var(--shiftora-blue-300);

  --shiftora-color-log-debug:   var(--shiftora-n-400);
  --shiftora-color-log-info:    var(--shiftora-blue-500);
  --shiftora-color-log-warn:    var(--shiftora-amber-500);
  --shiftora-color-log-error:   var(--shiftora-red-500);
  --shiftora-color-log-success: var(--shiftora-green-500);

  /* Direction has to be readable at a glance, so it is not part of the color scheme. */
  --shiftora-color-pull: var(--shiftora-blue-600);
  --shiftora-color-push: var(--shiftora-n-600);

  --shiftora-color-permission-allowed: var(--shiftora-color-success);
  --shiftora-color-permission-denied:  var(--shiftora-color-error);
  --shiftora-color-permission-pending: var(--shiftora-color-warning);

  /* =========================================================================
	  6. NAVIGATION
	  ========================================================================= */

  --shiftora-color-nav-bg:            #ffffff;
  --shiftora-color-nav-border:        var(--shiftora-color-border);
  --shiftora-color-nav-text:          var(--shiftora-n-900);
  --shiftora-color-nav-hover-bg:      var(--shiftora-color-bg-surface-alt);
  --shiftora-color-nav-active-bg:     var(--shiftora-blue-50);
  --shiftora-color-nav-active-text:   var(--shiftora-blue-700);

  /* =========================================================================
	  7. ELEVATION
	  =========================================================================
	  Three steps. A fourth is a sign a surface should use a border instead.
  ========================================================================= */

  --shiftora-shadow-none: none;
  --shiftora-shadow-xs:   0 1px 2px rgba(12, 24, 60, 0.05);
  --shiftora-shadow-sm:   0 1px 3px rgba(12, 24, 60, 0.06), 0 1px 2px rgba(12, 24, 60, 0.04);
  --shiftora-shadow-md:   0 4px 12px rgba(12, 24, 60, 0.08), 0 2px 4px rgba(12, 24, 60, 0.04);
  --shiftora-shadow-lg:   0 12px 32px rgba(12, 24, 60, 0.10), 0 4px 8px rgba(12, 24, 60, 0.05);
  --shiftora-shadow-xl:   0 20px 48px rgba(12, 24, 60, 0.14), 0 8px 16px rgba(12, 24, 60, 0.06);

  /* Card resting shadow, subtle enough to read as depth, not decoration. */
  --shiftora-shadow-card:       0 1px 3px rgba(12, 24, 60, 0.06), 0 1px 2px rgba(12, 24, 60, 0.04);
  --shiftora-shadow-card-hover: 0 8px 24px rgba(12, 24, 60, 0.10), 0 2px 6px rgba(12, 24, 60, 0.05);

  /* Modal overlay shadow. */
  --shiftora-shadow-modal: 0 24px 64px rgba(12, 24, 60, 0.18), 0 8px 20px rgba(12, 24, 60, 0.08);

  /* =========================================================================
	  8. TYPOGRAPHY
	  =========================================================================
	  System stack, so first paint never waits on a webfont.
  ========================================================================= */

  --shiftora-font-family-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --shiftora-font-family-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Roboto Mono", "Courier New", monospace;

  --shiftora-font-size-xs:   0.75rem;
  --shiftora-font-size-sm:   0.875rem;
  --shiftora-font-size-base: 1rem;
  --shiftora-font-size-lg:   1.125rem;
  --shiftora-font-size-xl:   1.25rem;
  --shiftora-font-size-2xl:  1.5rem;
  --shiftora-font-size-3xl:  1.875rem;

  --shiftora-font-size-mono-xs:   0.75rem;
  --shiftora-font-size-mono-sm:   0.8125rem;
  --shiftora-font-size-mono-base: 0.875rem;

  --shiftora-font-weight-regular:  400;
  --shiftora-font-weight-medium:   500;
  --shiftora-font-weight-semibold: 600;
  --shiftora-font-weight-bold:     700;

  /* A 1.25 step between levels. Anything flatter reads as unstyled. */
  --shiftora-line-height-tight:   1.25;
  --shiftora-line-height-normal:  1.55;
  --shiftora-line-height-relaxed: 1.7;

  --shiftora-tracking-tight:  -0.01em;
  --shiftora-tracking-normal: 0em;
  --shiftora-tracking-wide:   0.02em;
  --shiftora-tracking-wider:  0.06em;

  /* =========================================================================
	  9. SPACING
	  =========================================================================
	  A 4px base. The scale has no step 9 (8 or 10 covers every case).
  ========================================================================= */

  --shiftora-space-1:  0.25rem;
  --shiftora-space-2:  0.5rem;
  --shiftora-space-3:  0.75rem;
  /* Reading width for a form. */
  --shiftora-measure-form: 48rem;

  /* A table cell holding a long value, and a form field in a toolbar row. */
  --shiftora-measure-cell: 18rem;
  --shiftora-measure-field: 14rem;

  --shiftora-space-4:  1rem;
  --shiftora-space-5:  1.25rem;
  --shiftora-space-6:  1.5rem;
  --shiftora-space-7:  2rem;
  --shiftora-space-8:  2.5rem;
  --shiftora-space-10: 3rem;
  --shiftora-space-12: 4rem;

  /* =========================================================================
	  10. RADII
	  =========================================================================
	  Restrained, with a ceiling of 0.75rem.
  ========================================================================= */

  --shiftora-radius-none: 0;
  --shiftora-radius-sm:   0.25rem;
  --shiftora-radius-md:   0.375rem;
  --shiftora-radius-lg:   0.5rem;
  --shiftora-radius-xl:   0.75rem;
  --shiftora-radius-2xl:  1rem;
  --shiftora-radius-full: 9999px;

  /* =========================================================================
	  11. MOTION
	  =========================================================================
	  Ease-out, no bounce. Only opacity, transform and color are animated.
  ========================================================================= */

  --shiftora-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --shiftora-duration-instant: 120ms;
  --shiftora-duration-normal:  200ms;
  --shiftora-duration-slow:    280ms;

  --shiftora-transition-fast:   120ms var(--shiftora-ease-out);
  --shiftora-transition-normal: 200ms var(--shiftora-ease-out);
  --shiftora-transition-slow:   280ms var(--shiftora-ease-out);

  /* Spring-like ease for interactive elements that need personality. */
  --shiftora-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --shiftora-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* Card and element transitions. */
  --shiftora-transition-lift:    200ms var(--shiftora-ease-out);
  --shiftora-transition-expand:  280ms var(--shiftora-ease-spring);

  /* =========================================================================
	  12. Z-INDEX
	  ========================================================================= */

  --shiftora-z-base:     1;
  --shiftora-z-sticky:   10;
  --shiftora-z-dropdown: 20;
  --shiftora-z-tooltip:  30;
  --shiftora-z-overlay:  100;
  --shiftora-z-modal:    101;
  --shiftora-z-toast:    110;

  /* =========================================================================
	  13. LAYOUT
	  ========================================================================= */

  --shiftora-content-max-width:       76rem;
  --shiftora-content-prose-width:     70ch;

  /*
   * Offset for the WordPress admin bar. Declared on :root in header.css and read
   * here, so there is a single source of truth.
   */
  --shiftora-admin-bar-offset: var(--shiftora-admin-bar-offset, 0px);

  /* Legacy aliases still referenced by inline styles and older templates. */
  --shiftora-color-danger:         var(--shiftora-color-error);
  --shiftora-color-danger-400:     var(--shiftora-red-400);
  --shiftora-color-danger-600:     var(--shiftora-red-600);
  --shiftora-color-surface-raised: var(--shiftora-color-bg-surface-alt);
  --shiftora-color-text-primary:   var(--shiftora-color-text);
  --shiftora-text-primary:         var(--shiftora-color-text);
  --shiftora-text-muted:           var(--shiftora-color-text-muted);
  --shiftora-black-300:            var(--shiftora-color-bg-inset);
}