/* ==========================================================================
   SANITY UI - CSS DESIGN VARIABLES
   ==========================================================================

   This file provides the core Sanity UI design language as CSS Custom Properties
   (Variables) for direct consumption in CSS stylesheets or inline styles.

   - Supports light and dark color schemes via `prefers-color-scheme`.
   - Uses numerical scales for spacing, radius, font sizes, line heights,
     and shadows where applicable for ergonomic adjustment.
   - Provides semantic color variables for common UI roles (text, surface,
     border, interactive states, etc.) mapped to the underlying palette.
   - Includes typography, transitions, and layout constants.

   --------------------------------------------------------------------------
   Table of Contents
   --------------------------------------------------------------------------
   1.  SETUP & BASE
   2.  RAW COLOR PALETTE
   3.  SEMANTIC COLORS (LIGHT & DARK MODE)
        - Brand / Primary
        - Feedback (Positive, Caution, Critical)
        - Neutral / Base UI
        - Focus Ring
        - Shadows (Colors Only)
   4.  TYPOGRAPHY
        - Font Families
        - Font Weights
        - Font Sizes (Numerical Scale)
        - Line Heights (Numerical Scale)
        - Letter Spacing (Numerical Scale)
   5.  SPACING & SIZING
        - Spacing (Numerical Scale)
        - Border Radius (Numerical Scale)
        - Container Widths (Numerical Scale)
   6.  SHADOWS (COMPUTED)
        - Shadow Components (Numerical Offsets/Blur/Spread)
        - Box Shadows (Numerical Scale)
   7.  TRANSITIONS
   8.  LAYOUT & Z-INDEX
   -------------------------------------------------------------------------- */

/* ==========================================================================
   1. SETUP & BASE
   ========================================================================== */

:root {
  /* Enables system-level light/dark mode detection */
  color-scheme: light dark;

  /* Default to light mode colors (overridden later in dark mode) */
  --base-color: var(--black);
  --base-background-color: var(--white);

  /* Default text rendering settings */
  color: var(--base-color);
  background-color: var(--base-background-color);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: var(--font-family-sans);

  /* Gutter Gradient Variables */
}

/* ==========================================================================
   2. RAW COLOR PALETTE
   ==========================================================================

   The base HSL palette values.
   Naming: --<hue>-<value>
*/
:root {
  --black: hsl(0, 0%, 0%);
  --white: hsl(0, 0%, 100%);

  --gray-50: hsl(240deg, 12%, 97%);
  --gray-100: hsl(240deg, 10%, 94%);
  --gray-200: hsl(231deg, 10%, 90%);
  --gray-300: hsl(232deg, 11%, 76%);
  --gray-400: hsl(228deg, 13%, 63%);
  --gray-500: hsl(229deg, 13%, 51%);
  --gray-600: hsl(228deg, 16%, 38%);
  --gray-700: hsl(229deg, 18%, 27%);
  --gray-800: hsl(229deg, 19%, 18%);
  --gray-900: hsl(228deg, 19%, 13%);
  --gray-950: hsl(233deg, 17%, 9%);

  --blue-50: hsl(222deg, 100%, 98%);
  --blue-100: hsl(222deg, 100%, 95%);
  --blue-200: hsl(223deg, 100%, 93%);
  --blue-300: hsl(224deg, 100%, 83%);
  --blue-400: hsl(226deg, 100%, 73%);
  --blue-500: hsl(232deg, 96%, 66%);
  --blue-600: hsl(239deg, 78%, 58%);
  --blue-700: hsl(241deg, 63%, 41%);
  --blue-800: hsl(230deg, 55%, 22%);
  --blue-900: hsl(234deg, 49%, 17%);
  --blue-950: hsl(235deg, 43%, 11%);

  --purple-50: hsl(260deg, 95%, 98%);
  --purple-100: hsl(260deg, 98%, 96%);
  --purple-200: hsl(263deg, 96%, 94%);
  --purple-300: hsl(262deg, 92%, 84%);
  --purple-400: hsl(262deg, 88%, 75%);
  --purple-500: hsl(262deg, 83%, 64%);
  --purple-600: hsl(265deg, 79%, 51%);
  --purple-700: hsl(263deg, 72%, 36%);
  --purple-800: hsl(258deg, 60%, 24%);
  --purple-900: hsl(257deg, 46%, 17%);
  --purple-950: hsl(260deg, 41%, 11%);

  --magenta-50: hsl(340deg, 82%, 98%);
  --magenta-100: hsl(339deg, 83%, 95%);
  --magenta-200: hsl(339deg, 83%, 93%);
  --magenta-300: hsl(340deg, 82%, 82%);
  --magenta-400: hsl(340deg, 81%, 69%);
  --magenta-500: hsl(340deg, 80%, 53%);
  --magenta-600: hsl(337deg, 78%, 39%);
  --magenta-700: hsl(333deg, 73%, 28%);
  --magenta-800: hsl(328deg, 63%, 18%);
  --magenta-900: hsl(327deg, 46%, 14%);
  --magenta-950: hsl(341deg, 35%, 9%);

  --red-50: hsl(5deg, 100%, 98%);
  --red-100: hsl(4deg, 100%, 95%);
  --red-200: hsl(4deg, 98%, 93%);
  --red-300: hsl(5deg, 95%, 82%);
  --red-400: hsl(6deg, 90%, 69%);
  --red-500: hsl(5deg, 85%, 57%);
  --red-600: hsl(5deg, 78%, 45%);
  --red-700: hsl(4deg, 70%, 32%);
  --red-800: hsl(3deg, 58%, 19%);
  --red-900: hsl(2deg, 41%, 14%);
  --red-950: hsl(356deg, 30%, 9%);

  --orange-50: hsl(28deg, 100%, 97%);
  --orange-100: hsl(25deg, 100%, 93%);
  --orange-200: hsl(24deg, 100%, 89%);
  --orange-300: hsl(24deg, 100%, 76%);
  --orange-400: hsl(24deg, 100%, 63%);
  --orange-500: hsl(24deg, 100%, 49%);
  --orange-600: hsl(24deg, 98%, 35%);
  --orange-700: hsl(24deg, 94%, 25%);
  --orange-800: hsl(22deg, 82%, 15%);
  --orange-900: hsl(17deg, 65%, 12%);
  --orange-950: hsl(14deg, 43%, 9%);

  --yellow-50: hsl(51deg, 94%, 94%);
  --yellow-100: hsl(52deg, 91%, 86%);
  --yellow-200: hsl(50deg, 90%, 78%);
  --yellow-300: hsl(47deg, 91%, 65%);
  --yellow-400: hsl(44deg, 95%, 53%);
  --yellow-500: hsl(39deg, 96%, 42%);
  --yellow-600: hsl(34deg, 90%, 31%);
  --yellow-700: hsl(31deg, 80%, 22%);
  --yellow-800: hsl(28deg, 66%, 14%);
  --yellow-900: hsl(24deg, 40%, 11%);
  --yellow-950: hsl(24deg, 20%, 8%);

  --green-50: hsl(157deg, 89%, 95%);
  --green-100: hsl(158deg, 89%, 88%);
  --green-200: hsl(158deg, 87%, 82%);
  --green-300: hsl(158deg, 86%, 65%);
  --green-400: hsl(159deg, 88%, 50%);
  --green-500: hsl(159deg, 96%, 37%);
  --green-600: hsl(159deg, 98%, 24%);
  --green-700: hsl(158deg, 98%, 16%);
  --green-800: hsl(158deg, 91%, 10%);
  --green-900: hsl(162deg, 72%, 8%);
  --green-950: hsl(172deg, 51%, 6%);

  --cyan-50: hsl(180deg, 92%, 95%);
  --cyan-100: hsl(180deg, 91%, 88%);
  --cyan-200: hsl(180deg, 87%, 78%);
  --cyan-300: hsl(180deg, 81%, 66%);
  --cyan-400: hsl(180deg, 81%, 49%);
  --cyan-500: hsl(182deg, 96%, 38%);
  --cyan-600: hsl(185deg, 96%, 26%);
  --cyan-700: hsl(185deg, 95%, 16%);
  --cyan-800: hsl(187deg, 86%, 11%);
  --cyan-900: hsl(188deg, 68%, 9%);
  --cyan-950: hsl(196deg, 37%, 8%);
}

/* ==========================================================================
   3. SEMANTIC COLORS (LIGHT & DARK MODE)
   ==========================================================================

   Purpose-driven color variables mapped to the raw palette.

   Naming: --color-<role>-<element?>-<state?>
   Example: --color-text-default, --color-surface-primary-hover, --color-border-critical
*/

:root {
  /* ---------------------------------- */
  /* Semantic Colors: LIGHT MODE        */
  /* ---------------------------------- */

  /* --- Brand / Primary --- */
  --color-brand-primary-fg: var(--blue-600);
  --color-brand-primary-bg-strong: var(--blue-600);
  --color-brand-primary-bg-med: var(--blue-100);
  --color-brand-primary-bg-light: var(--blue-50);
  --color-brand-primary-border: var(--blue-300);

  /* --- Feedback: Positive (Green) --- */
  --color-feedback-positive-fg: var(--green-700);
  --color-feedback-positive-bg-strong: var(--green-500);
  --color-feedback-positive-bg-med: var(--green-100);
  --color-feedback-positive-bg-light: var(--green-50);
  --color-feedback-positive-border: var(--green-300);

  /* --- Feedback: Caution (Yellow/Orange) --- */
  --color-feedback-caution-fg: var(--yellow-700);
  --color-feedback-caution-bg-strong: var(--yellow-500);
  --color-feedback-caution-bg-med: var(--yellow-100);
  --color-feedback-caution-bg-light: var(--yellow-50);
  --color-feedback-caution-border: var(--yellow-300);

  /* --- Feedback: Critical (Red) --- */
  --color-feedback-critical-fg: var(--red-600);
  --color-feedback-critical-bg-strong: var(--red-600);
  --color-feedback-critical-bg-med: var(--red-100);
  --color-feedback-critical-bg-light: var(--red-50);
  --color-feedback-critical-border: var(--red-300);

  /* --- Neutral / Base UI --- */
  /* Text */
  --color-text-default: var(--gray-800);
  --color-text-muted: var(--gray-600);
  --color-text-on-contrast: var(--white); /* Text on dark/colored backgrounds */
  --color-text-disabled: var(--gray-400);
  --color-text-link: var(--blue-600);
  --color-text-accent: var(--purple-600); /* Used for inline accents */

  /* Surface (Backgrounds) */
  --color-surface-default: var(--white); /* Base page/component background */
  --color-surface-neutral: var(--gray-50); /* Slightly off-white */
  --color-surface-subtle: var(--gray-100); /* Grouping subtle backgrounds */
  --color-surface-strong: var(--gray-200); /* Grouping stronger backgrounds */
  --color-surface-contrast: var(--gray-900); /* Dark background for contrast */
  --color-surface-disabled: var(--gray-100);
  --color-surface-backdrop: hsla(0, 0%, 0%, 0.5); /* Modal overlays etc */

  /* Borders / Dividers */
  --color-border-default: var(--gray-200);
  --color-border-muted: var(--gray-100); /* Softer borders/dividers */
  --color-border-strong: var(--gray-300);
  --color-border-disabled: var(--gray-100);

  /* Interactive States (Examples - Needs refinement based on components) */
  /* These often combine surface/border/text colors based on component logic */
  --color-interactive-primary-hover-bg: var(--blue-500);
  --color-interactive-primary-active-bg: var(--blue-700);
  --color-interactive-primary-resting-fg: var(--white);

  --color-interactive-neutral-hover-bg: var(--gray-100);
  --color-interactive-neutral-active-bg: var(--gray-200);

  /* --- Focus Ring --- */
  --color-focus-ring: var(--blue-500);

  /* --- Shadows (Colors Only) --- */
  /* These are combined with numerical offsets/blur later */
  /* Using black with varying alpha for light mode shadows */
  --color-shadow-umbra: hsla(0, 0%, 0%, 0.1);
  --color-shadow-penumbra: hsla(0, 0%, 0%, 0.07);
  --color-shadow-ambient: hsla(0, 0%, 0%, 0.06);
  --color-shadow-outline: hsla(0, 0%, 0%, 0.15); /* Used for subtle outlines */
}

/* ---------------------------------- */
/* Semantic Colors: DARK MODE         */
/* ---------------------------------- */
@media (prefers-color-scheme: dark) {
  :root {
    /* Override base colors */
    --base-color: var(--white);
    --base-background-color: var(--gray-950); /* Or a dark gray like 950 */

    /* --- Brand / Primary --- */
    --color-brand-primary-fg: var(--blue-400);
    --color-brand-primary-bg-strong: var(--blue-500);
    --color-brand-primary-bg-med: var(--blue-900);
    --color-brand-primary-bg-light: var(--blue-950);
    --color-brand-primary-border: var(--blue-700);

    /* --- Feedback: Positive --- */
    --color-feedback-positive-fg: var(--green-400);
    --color-feedback-positive-bg-strong: var(--green-500);
    --color-feedback-positive-bg-med: var(--green-900);
    --color-feedback-positive-bg-light: var(--green-950);
    --color-feedback-positive-border: var(--green-700);

    /* --- Feedback: Caution --- */
    --color-feedback-caution-fg: var(--yellow-400);
    --color-feedback-caution-bg-strong: var(--yellow-500);
    --color-feedback-caution-bg-med: var(--yellow-900);
    --color-feedback-caution-bg-light: var(--yellow-950);
    --color-feedback-caution-border: var(--yellow-700);

    /* --- Feedback: Critical --- */
    --color-feedback-critical-fg: var(--red-400);
    --color-feedback-critical-bg-strong: var(--red-500);
    --color-feedback-critical-bg-med: var(--red-900);
    --color-feedback-critical-bg-light: var(--red-950);
    --color-feedback-critical-border: var(--red-700);

    /* --- Neutral / Base UI --- */
    /* Text */
    --color-text-default: var(--gray-100);
    --color-text-muted: var(--gray-400);
    --color-text-on-contrast: var(--black); /* Text on light/colored backgrounds */
    --color-text-disabled: var(--gray-600);
    --color-text-link: var(--blue-400);
    --color-text-accent: var(--purple-400);

    /* Surface (Backgrounds) */
    --color-surface-default: var(--gray-950); /* Darkest background */
    --color-surface-neutral: var(--gray-900); /* Slightly lighter */
    --color-surface-subtle: var(--gray-800);
    --color-surface-strong: var(--gray-700);
    --color-surface-contrast: var(--gray-50); /* Light background for contrast */
    --color-surface-disabled: var(--gray-900);
    --color-surface-backdrop: hsla(0, 0%, 0%, 0.7); /* Darker backdrop */

    /* Borders / Dividers */
    --color-border-default: var(--gray-800);
    --color-border-muted: var(--gray-900); /* Darker, less visible */
    --color-border-strong: var(--gray-700);
    --color-border-disabled: var(--gray-800);

    /* Interactive States (Examples) */
    --color-interactive-primary-hover-bg: var(--blue-600);
    --color-interactive-primary-active-bg: var(--blue-400);
    --color-interactive-primary-resting-fg: var(--black); /* Text on primary */

    --color-interactive-neutral-hover-bg: var(--gray-800);
    --color-interactive-neutral-active-bg: var(--gray-700);

    /* --- Focus Ring --- */
    --color-focus-ring: var(--blue-500); /* Often same color, check contrast */

    /* --- Shadows (Colors Only) --- */
    /* Using black with higher alpha for dark mode shadows */
    --color-shadow-umbra: hsla(0, 0%, 0%, 0.2);
    --color-shadow-penumbra: hsla(0, 0%, 0%, 0.14);
    --color-shadow-ambient: hsla(0, 0%, 0%, 0.12);
    --color-shadow-outline: hsla(0, 0%, 0%, 0.3);
  }
}

/* ==========================================================================
   4. TYPOGRAPHY
   ========================================================================== */

:root {
  /* ---------------------------------- */
  /* Font Families                      */
  /* ---------------------------------- */
  --font-family-heading: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', 'Liberation Sans', Helvetica, Arial, system-ui, sans-serif;
  --font-family-text: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', 'Liberation Sans', Helvetica, Arial, system-ui, sans-serif;
  --font-family-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;

  /* ---------------------------------- */
  /* Font Weights                       */
  /* ---------------------------------- */
  /* Use these named weights */
  --font-weight-1: 400;
  --font-weight-2: 500;
  --font-weight-3: 600;
  --font-weight-4: 700;
  /* Note: Heavier weights (800, 900) exist in source but less common */
  --font-weight-5: 800;
  --font-weight-6: 900;

  /* ---------------------------------- */
  /* Font Sizes (Numerical Scale)       */
  /* ---------------------------------- */
  /* Combined scale from label, code, text, heading sizes. */
  /* Use comments to hint at original context if needed. */
  --font-size-1: 8.1px; /* label-1 */
  --font-size-2: 9.5px; /* label-2 */
  --font-size-3: 10px; /* code-1, text-1 */
  --font-size-4: 10.8px; /* label-3 */
  --font-size-5: 12.25px; /* label-4 */
  --font-size-6: 13px; /* code-2, text-2, heading-1 */
  --font-size-7: 13.6px; /* label-5 */
  --font-size-8: 15px; /* text-3, label-6 */
  --font-size-9: 16px; /* code-3, heading-2 */
  --font-size-10: 18px; /* text-4 */
  --font-size-11: 19px; /* code-4 */
  --font-size-12: 21px; /* text-5, heading-3 */
  --font-size-13: 22px; /* code-5 */
  --font-size-14: 27px; /* heading-4 */
  --font-size-15: 33px; /* heading-5 */
  --font-size-16: 38px; /* heading-6 */

  /* Category type scales */
  --font-size-code-1: var(--font-size-3, 10px);
  --font-size-code-2: var(--font-size-6, 13px);
  --font-size-code-3: var(--font-size-9, 16px);
  --font-size-code-4: var(--font-size-11, 19px);
  --font-size-code-5: var(--font-size-13, 22px);

  --font-size-text-1: var(--font-size-3, 10px);
  --font-size-text-2: var(--font-size-6, 13px);
  --font-size-text-3: var(--font-size-8, 15px);
  --font-size-text-4: var(--font-size-10, 18px);
  --font-size-text-5: var(--font-size-12, 21px);

  --font-size-heading-1: var(--font-size-6, 13px);
  --font-size-heading-2: var(--font-size-9, 16px);
  --font-size-heading-3: var(--font-size-12, 21px);
  --font-size-heading-4: var(--font-size-14, 27px);
  --font-size-heading-5: var(--font-size-15, 33px);
  --font-size-heading-6: var(--font-size-16, 38px);

  --font-size-label-1: var(--font-size-1, 8.1px);
  --font-size-label-2: var(--font-size-2, 9.5px);
  --font-size-label-3: var(--font-size-4, 10.8px);
  --font-size-label-4: var(--font-size-5, 12.25px);
  --font-size-label-5: var(--font-size-7, 13.6px);
  --font-size-label-6: var(--font-size-8, 15px);

  /* ---------------------------------- */
  /* Line Heights (Numerical Scale)     */
  /* ---------------------------------- */
  /* Unitless values are recommended for line-height. */
  /* Scale derived from font sizes, may need adjustment/simplification. */
  --line-height-1: 1; /* 15 / 15 */
  --line-height-2: 1.03; /* 14 / 13.6 */
  --line-height-3: 1.06; /* 13 / 12.25 */
  --line-height-4: 1.11; /* 12 / 10.8 */
  --line-height-5: 1.16; /* 11 / 9.5 */
  --line-height-6: 1.23; /* 10 / 8.1 */
  --line-height-7: 1.24; /* 41 / 33 - 47 / */
  --line-height-8: 1.3; /* 35 / 27 */
  --line-height-9: 1.38; /* 29 / 21 */
  --line-height-10: 1.41; /* 31 / 22 */
  --line-height-11: 1.42; /* 27 / 19 */
  --line-height-12: 1.44; /* 23 / 16 */
  --line-height-13: 1.46; /* 19 / 13 */
  --line-height-14: 1.5; /* 27 / 18 - 15 / 10*/

  /* Simplified options */
  --line-height-solid: 1;
  --line-height-heading: 1.25;
  --line-height-text: 1.5;

  /* ---------------------------------- */
  /* Letter Spacing (Numerical Scale)   */
  /* ---------------------------------- */
  /* Using `em` units */
  --letter-spacing-0: 0; /* Default for most text */
  --letter-spacing-1: -0.02em; /* Example */
  --letter-spacing-2: 0.025em; /* Example */
  --letter-spacing-3: 0.05em; /* Derived from label styles (0.5px / ~10px font) */
  --letter-spacing-4: 0.1em; /* Example */

  /* FONT SHORTHAND */
  --code-1: 10px / 1.5, var(--font-family-mono);
  --code-2: 13px / 1.4615, var(--font-family-mono);
  --code-3: 16px / 1.4375, var(--font-family-mono);
  --code-4: 19px / 1.421, var(--font-family-mono);

  --text-1: 10px / 1.5, var(--font-family-text);
  --text-2: 13px / 1.4615, var(--font-family-text);
  --text-3: 15px / 1.5333, var(--font-family-text);
  --text-4: 18px / 1.5, var(--font-family-text);
  --text-5: 21px / 1.4761, var(--font-family-text);

  --heading-1: 13px / 1.4615, var(--font-family-heading);
  --heading-2: 16px / 1.4375, var(--font-family-heading);
  --heading-3: 21px / 1.3809, var(--font-family-heading);
  --heading-4: 27px / 1.2962, var(--font-family-heading);
  --heading-5: 33px / 1.2424, var(--font-family-heading);
  --heading-6: 38px / 1.2368, var(--font-family-heading);

  --label-1: 8.1px / 1.2345, var(--font-family-text);
  --label-2: 9.5px / 1.1578, var(--font-family-text);
  --label-3: 10.8px / 1.1111, var(--font-family-text);
  --label-4: 12.25px / 1.0612, var(--font-family-text);
  --label-5: 13.6px / 1.0294, var(--font-family-text);
  --label-6: 15px / 1, var(--font-family-text);
}

/* ==========================================================================
   5. SPACING & SIZING
   ========================================================================== */

:root {
  /* ---------------------------------- */
  /* Spacing (Numerical Scale)          */
  /* ---------------------------------- */
  /* Used for padding, margin, gap, etc. Assumed px units. */

  --space-7: 84px;

  /* ---------------------------------- */
  /* Container Widths (Numerical Scale) */
  /* ---------------------------------- */
  /* Max-widths for layout containers. Assumed px units. */
  --container-1: 320px;
  --container-2: 640px;
  --container-3: 960px;
  --container-4: 1280px;
  --container-5: 1600px;
  --container-6: 1920px;
}

/* ==========================================================================
   6. SHADOWS (COMPUTED)
   ========================================================================== */

:root {
  /* ---------------------------------- */
  /* Shadow Components (Numerical)      */
  /* ---------------------------------- */
  /* Define the offset-x, offset-y, blur-radius, spread-radius in px */
  /* Level 0 is null/none */
  /* Level 1 (Subtle/Inset?) */
  --shadow-umbra-px-1: 0px 0px 0px 0px;
  --shadow-penumbra-px-1: 0px 0px 0px 0px;
  --shadow-ambient-px-1: 0px 0px 0px 0px;
  /* Level 2 (Low) */
  --shadow-umbra-px-2: 0px 3px 5px -2px;
  --shadow-penumbra-px-2: 0px 6px 10px 0px;
  --shadow-ambient-px-2: 0px 1px 18px 1px;
  /* Level 3 (Medium) */
  --shadow-umbra-px-3: 0px 7px 8px -4px;
  --shadow-penumbra-px-3: 0px 12px 17px 2px;
  --shadow-ambient-px-3: 0px 5px 22px 4px;
  /* Level 4 (High) */
  --shadow-umbra-px-4: 0px 9px 11px -5px;
  --shadow-penumbra-px-4: 0px 18px 28px 2px;
  --shadow-ambient-px-4: 0px 7px 34px 6px;
  /* Level 5 (Very High) */
  --shadow-umbra-px-5: 0px 11px 15px -7px;
  --shadow-penumbra-px-5: 0px 24px 38px 3px;
  --shadow-ambient-px-5: 0px 9px 46px 8px;

  /* ---------------------------------- */
  /* Box Shadows (Numerical Scale)      */
  /* ---------------------------------- */
  /* Combines numerical components with semantic shadow colors */
  --shadow-0: none;
  /* Shadow 1 is typically inset or very subtle - example */
  --shadow-1: inset 0 0 0 1px var(--color-border-default);
  --shadow-2: var(--shadow-umbra-px-2) var(--color-shadow-umbra), var(--shadow-penumbra-px-2) var(--color-shadow-penumbra), var(--shadow-ambient-px-2) var(--color-shadow-ambient);
  --shadow-3: var(--shadow-umbra-px-3) var(--color-shadow-umbra), var(--shadow-penumbra-px-3) var(--color-shadow-penumbra), var(--shadow-ambient-px-3) var(--color-shadow-ambient);
  --shadow-4: var(--shadow-umbra-px-4) var(--color-shadow-umbra), var(--shadow-penumbra-px-4) var(--color-shadow-penumbra), var(--shadow-ambient-px-4) var(--color-shadow-ambient);
  --shadow-5: var(--shadow-umbra-px-5) var(--color-shadow-umbra), var(--shadow-penumbra-px-5) var(--color-shadow-penumbra), var(--shadow-ambient-px-5) var(--color-shadow-ambient);
}

/* ==========================================================================
   7. TRANSITIONS
   ========================================================================== */

:root {
  --transition-duration-1: 100ms; /* From button styles */
  --transition-duration-2: 150ms; /* From input switch */
  --transition-duration-3: 200ms; /* Example */
  --transition-duration-4: 300ms; /* Example */

  --transition-easing-default: ease-in-out;
  --transition-easing-ease-out: ease-out; /* From input switch */
  --transition-easing-ease-in: ease-in;
}

/* ==========================================================================
   8. LAYOUT & Z-INDEX
   ========================================================================== */

:root {
  /* ---------------------------------- */
  /* Z-Index (Numerical Scale)          */
  /* ---------------------------------- */
  /* Stacking order for layers */
  --z-index-0: 0;
  --z-index-1: 100; /* Base elements */
  --z-index-2: 200; /* Tooltips (from layer.tooltip.zOffset) */
  --z-index-3: 300;
  --z-index-4: 400; /* Popovers (from layer.popover.zOffset) */
  --z-index-5: 500;
  --z-index-6: 600; /* Dialogs (from layer.dialog.zOffset) */
  --z-index-7: 700; /* Max */

  /* ---------------------------------- */
  /* Media Query Breakpoints (Numerical)*/
  /* ---------------------------------- */
  /* Values from theme.media - use in @media (min-width: var(--media-N)) */
  --media-1: 360px;
  --media-2: 600px;
  --media-3: 900px;
  --media-4: 1200px;
  --media-5: 1800px;
  --media-6: 2400px;
}

/* --- End of Sanity UI CSS Variables --- */

:root {
  --card-bg-color: light-dark(#f6f6f8, #0d0e12);
  --card-border-color: light-dark(var(--gray-200), var(--gray-800));
  --text-color: light-dark(#242736, #e3e4e8);
  --button-text-color: light-dark(white, #0d0e12);
  --button-background-color: light-dark(rgb(85, 107, 252), rgb(120, 152, 255));
  --button-background-color-hover: light-dark(rgb(64, 67, 231), rgb(170, 193, 255));
  --button-border-color: light-dark(rgb(85, 107, 252), rgb(120, 152, 255));
  --button-border-color-hover: light-dark(rgb(64, 67, 231), rgb(170, 193, 255));

  --button-color: light-dark(#fff, #000);
  --button-primary-bg: light-dark(#272937, #999999);
  --button-primary-bg-hover: light-dark(#1c1f28, #888888);

  --size-1: 1px;
  --size-2: 2px;
  --size-3: 4px;
  --size-4: 8px;
  --size-5: 16px;
  --size-6: 24px;
  --size-7: 32px;
  --size-8: 48px;
  --size-9: 64px;
  --size-10: 128px;
}

html {
  color-scheme: light dark;
  min-height: 100dvh;
  max-height: 100dvh;
  height: 100%;
  overflow: hidden;
}

body {
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', 'Liberation Sans', Helvetica, Arial, system-ui, sans-serif;
  color: var(--text-color) !important;
  min-height: 100dvh;
  max-height: 100dvh;
  height: 100%;
  overflow: hidden;
  display: grid;
  grid-template-areas:
    'header'
    'filters'
    'left-sidebar'
    'main'
    'footer';

  grid-template-rows: min-content min-content min-content 1fr min-content;
}

/* Utilities */
.capitalize {
  text-transform: capitalize;
}
.items-center {
  align-items: center;
}
.space-between {
  justify-content: space-between;
}
.flex-end {
  justify-content: flex-end;
}

.sticky {
  position: sticky;
}
.relative {
  position: relative;
}

.top-0 {
  top: 0;
}
.right-0 {
  right: 0;
}
.left-0 {
  left: 0;
}

.z-10 {
  z-index: 10;
}
.z-32 {
  z-index: 32;
}
.z-100 {
  z-index: 100;
}
.w-100 {
  width: 100%;
}
.h-100 {
  height: 100%;
}
.max-h-100 {
  max-height: 100%;
}
.min-h-0 {
  min-height: 0;
}
.y-scroll {
  overflow-y: scroll;
}

.border-color {
  border-color: var(--card-border-color);
}
.border-left {
  border-left-width: 1px;
  border-left-style: solid;
  border-left-color: var(--card-border-color);
}
.border-bottom {
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: var(--card-border-color);
}
.border-top {
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: var(--card-border-color);
}
.border-right {
  border-right-width: 1px;
  border-right-style: solid;
  border-top-color: var(--card-border-color);
}

.hr-border {
  margin-top: 0;
  margin-bottom: 0;
  height: 0;
  border-top: 0;
  border-bottom: 1px solid light-dark(var(--gray-200), var(--gray-800));
}

/* Layout */
header {
  grid-area: header;
}
nav {
  grid-area: left-sidebar;
}
main {
  grid-area: main;
  /* Ensure main takes up available space if body is grid/flex */
  overflow: hidden; /* Prevent main itself from scrolling */
  min-height: 0; /* Needed for grid children height */
}
footer {
  grid-area: footer;
}

/* Apply grid styles to main#main-content */
#main-content {
  display: grid;
  grid-template-areas:
    'payload response'
    'console console';
  grid-template-columns: 1fr 1fr;
  /* Let console height be flexible based on content, up to a max */
  grid-template-rows: 1fr 1fr;
  /* Ensure grid takes full height of its container (main) */
  height: 100%;
  max-height: 100%;
  min-height: 0; /* Important for nested overflow/height */
}

@media (max-width: 40rem) {
  /* Mobile layout: stack elements vertically */
  #main-content {
    grid-template-areas:
      'payload'
      'response'
      'console';
    grid-template-columns: 1fr;
    /* Adjust row heights for mobile, maybe allow content to determine height */
    grid-template-rows: auto auto auto;
    height: auto; /* Allow main content to scroll if needed */
    max-height: none;
    overflow-y: auto; /* Allow scrolling for the whole main area */
  }

  .block-lg {
    display: block !important;
  }

  .hidden-lg {
    display: none;
  }
}

@media (min-width: 40em) {
  body {
    grid-template:
      'header             header' min-content
      'filters            filters' min-content
      'left-sidebar       main  ' 1fr
      'footer             footer' min-content
      / minmax(auto, 320px) 1fr;
  }
  .border-top-none-l {
    border-top: 0;
  }
}

header {
  border-bottom: 1px solid var(--card-border-color);
  background: light-dark(white, var(--gray-950));
}

footer {
  border-top: 1px solid var(--card-border-color);
}

.logo-image {
  height: 25px;
  width: 25px;
}

.logo-image img {
  width: 100%;
  height: 100%;
}

.logo-text {
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', 'Liberation Sans', Helvetica, Arial, system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  margin: 0px;
  letter-spacing: 0px;
}

.sanity-button {
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  gap: 6px;
  background-color: light-dark(var(--gray-900), white) !important;
  color: light-dark(white, var(--gray-950)) !important;
  border: 0 !important;
  border-radius: 3px !important;
  outline: 0;
  font-size: 14px !important;
  line-height: 1 !important;
  padding: 0px 12px !important;
  height: 24px !important;
  max-width: 160px;
}

.sanity-button:hover {
  background-color: var(--button-primary-bg-hover) !important;
}

.config-label {
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.5px;
}

.config-label span {
  display: block;
  margin-bottom: 8px;
}

.function-list-item {
  font-size: 0.875rem;
  border-radius: 3px;
  margin: 0 0 1px 0;
  cursor: pointer;
}

.function-list-item-label {
  color: light-dark(var(--gray-800), var(--gray-400));
  font-weight: var(--font-weight-3);
  padding-bottom: var(--m-space-1);
}

.function-list-item-type {
  color: light-dark(var(--gray-900), var(--gray-300));
}

.dropdown-select {
  background: transparent;
  color: light-dark(var(--gray-950), var(--gray-300));
}

ol[type='content'] li:hover:not(.selected:not(.selected)) {
  color: light-dark(var(--gray-950), var(--gray-200));
  background-color: light-dark(var(--gray-50), var(--gray-900));
}

.selected:hover,
.selected {
  color: light-dark(var(--gray-950), var(--gray-200));
  background-color: light-dark(var(--gray-100), var(--gray-800)) !important;
}

:is(ol)[type='content'] {
  & > li:not(:last-of-type) {
    border-bottom: 0 !important;
  }
}

#payload {
  height: 100%;
}

#response {
  height: 100%;
}

.gutter-gradient {
  --gutter-width: 30px;
  --gutter-border-width: 1px;

  /* Light mode default gradient */
  background-image: linear-gradient(to right, var(--gray-50) var(--gutter-width), var(--gray-100) var(--gutter-width), var(--gray-100) calc(var(--gutter-width) + var(--gutter-border-width)), transparent calc(var(--gutter-width) + var(--gutter-border-width)));
}

/* Apply dark mode gradient override */
@media (prefers-color-scheme: dark) {
  .gutter-gradient {
    background-image: linear-gradient(to right, var(--gray-900) var(--gutter-width), var(--gray-800) var(--gutter-width), var(--gray-800) calc(var(--gutter-width) + var(--gutter-border-width)), transparent calc(var(--gutter-width) + var(--gutter-border-width)));
  }
  /* Add other dark-mode specific overrides here if needed */
}

.bg {
  background-color: light-dark(white, var(--gray-950));
}

.cm-editor {
  background-color: transparent;
}

.cm-cursor.cm-cursor {
  border-left-color: light-dark(var(--blue-600), var(--blue-400));
}

.cm-gutters.cm-gutters {
  background-color: transparent;
  color: light-dark(var(--gray-800), var(--gray-500));
  border-right: none;
}

& :is(input:not([is='switch']), select, textarea) {
  border: 1px solid light-dark(var(--gray-200), var(--gray-800)) !important;
  border-radius: 3px;
}

.cm-activeLine.cm-activeLine {
  background-color: light-dark(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.025)) !important;
}

.cm-activeLineGutter.cm-activeLineGutter {
  background-color: light-dark(rgba(0, 0, 0, 0.025), rgba(255, 255, 255, 0.1)) !important;
}

.slab-stat,
.slab-text {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-text-2);
}

.slab-stat {
  gap: 0 8px;
}

.slab-stat dt {
  font-weight: 400;
  text-transform: none;
  margin: 0;
  padding: 0;
}

.slab-stat dd {
  font-weight: 700;
  text-transform: none;
  margin: 0;
  padding: 0;
}

pre {
  color: var(--base-text-color) !important;
  background-color: transparent !important;
}

time {
  font-family: var(--font-family-mono);
}

/* Default sidebar */
#sidebar {
  transition:
    width 0.3s ease-in-out,
    min-width 0.3s ease-in-out;
}

/* Navigation collapse functionality */
#nav-toggle:checked ~ #sidebar {
  width: 40px !important;
  min-width: 40px !important;
}

#nav-toggle ~ #sidebar h4,
#nav-toggle ~ #sidebar function-list {
  opacity: 1;
  transition: opacity 0.3s ease-in 0.1s;
  pointer-events: auto;
}

#nav-toggle:checked ~ #sidebar h4,
#nav-toggle:checked ~ #sidebar function-list {
  opacity: 0;
  transition: opacity 0.2s ease-out;
  pointer-events: none;
}

/* Ensure toggle button stays visible during animations */
#sidebar #nav-toggle-label {
  opacity: 1;
  pointer-events: auto;
}

/* Dynamic icons based on state */
#nav-toggle-label::before {
  content: '‹'; /* Left-pointing angle when expanded (click to collapse) */
  font-size: 16px;
  font-weight: bold;
  transition: transform 0.2s ease-in-out;
  display: inline-block;
}

#nav-toggle:checked ~ #sidebar #nav-toggle-label::before {
  transform: rotate(180deg);
}

/* Add transitions to body grid layout */
body {
  transition: grid-template-columns 0.3s ease-in-out;
}

/* Adjust body grid when nav is collapsed - use :has() selector */
body:has(#nav-toggle:checked) {
  grid-template-columns: 40px 1fr !important;
}

@media (min-width: 40em) {
  body {
    transition: grid-template 0.3s ease-in-out;
  }

  body:has(#nav-toggle:checked) {
    grid-template:
      'header             header' min-content
      'filters            filters' min-content
      'left-sidebar       main  ' 1fr
      'footer             footer' min-content
      / 40px 1fr !important;
  }
}

.bg-base {
  background-color: var(--base-background-color);
}

.pre-wrap {
  white-space: pre-wrap;
}

.nowrap {
  white-space: nowrap;
}

.break-word {
  word-wrap: break-word;
}

.block {
  display: block;
}

.inline-block {
  display: inline-block;
}

.transparent {
  background: transparent;
}

.component-color {
  color: light-dark(var(--gray-950), var(--gray-300));
}

.component-height {
  height: 2.5rem;
}

.hidden {
  display: none;
}

.mar-l-specific {
  margin-left: 31px;
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-auto {
  overflow: auto;
}

.response-panel-grid {
  display: grid;
  grid-template-rows: auto 1fr;
  grid-template-columns: 1fr;
}

.gap-25 {
  gap: 0.25rem;
}

.appearance-none {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.dropdown-template {
  padding-right: 2rem;
  border: 1px solid var(--gray-400);
  border-radius: var(--m-border-radius-2);
  height: var(--input-height, 2.5rem);
}

.dropdown-template-div {
  position: absolute;
  top: 50%;
  right: 0.4rem;
  transform: translateY(-50%);
  pointer-events: none;
}

.nav-min-width {
  min-width: 200px;
}

.nav-label {
  position: absolute;
  top: var(--m-space-2);
  right: var(--m-space-3);
  cursor: pointer;
  padding: 4px;
  border-radius: 2px;
  background: var(--color-surface-subtle);
  border: 1px solid var(--color-border-default);
}