/* ==========================================================================
  Conturalis - Frontend Design System  > Theme Tokens
  Inspired by: Google Material Design 3 - https://m3.material.io/
   ========================================================================== */

/* ---------------------------------------------------------
  == Typography & Color Bases
   --------------------------------------------------------- */
   
:root {
  /* --- Brand Bases --- */
  --cts-theme-color-primary-500:    hsl(212, 80%, 42%);
  --cts-theme-color-secondary-500:  hsl(205, 29%, 69%);
  --cts-theme-color-accent-500:     hsl(60, 89%, 7%);

  /* --- Semantic Bases (Harmonized) --- */
  /* We mix 3% of Primary into these so they don't look like generic 'default' colors. */
  --cts-theme-color-success-600:    color-mix(in oklab, var(--cts-theme-color-primary-500) 3%, hsl(148 65% 40%));
  --cts-theme-color-warning-600:    color-mix(in oklab, var(--cts-theme-color-primary-500) 3%, hsl(38  92% 50%));
  --cts-theme-color-danger-600:     color-mix(in oklab, var(--cts-theme-color-primary-500) 3%, hsl(0   72% 50%));

  /* --- Neutral Bases --- */
  /* Pure Grey (Fallback/Reference - Static Primitive) */
  --cts-theme-color-neutral-static: hsl(210, 7%, 48%);

  /* Themed Neutral (Light Mode) */
  /* Mixes 2% of Brand Color into the gray for a warmer/unified UI. */
  --cts-theme-color-neutral-500:    color-mix(in oklab, var(--cts-theme-color-primary-500) 2%, var(--cts-theme-color-neutral-static));

  /* Themed Neutral (Dark Mode Base) */
  /* Mixes with 45% White and tinting it with 3% Primary.*/
  --cts-theme-color-neutral-500--dark: color-mix(
      in oklab, 
      var(--cts-theme-color-primary-500) 3%, 
      color-mix(in oklab, var(--cts-theme-color-neutral-static), white 45%)
  );
  
  /* --- Typography Config --- */
  --cts-theme-font-sans: "Roboto", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  --cts-theme-font-mono: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --cts-theme-font-headers: "Roboto", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  --cts-theme-font-titles: "Roboto", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  --cts-theme-font-serif: "Roboto Slab", Georgia, "Times New Roman", serif;
  --cts-theme-font-accent: "Roboto Condensed", "Roboto", ui-sans-serif, system-ui, -apple-system, sans-serif;
}

/* ---------------------------------------------------------
  == Generated Color Ramps
   --------------------------------------------------------- */

/* --- Primary Ramp --- */
:root {
  --cts-theme-color-primary-50:   color-mix(in oklab, var(--cts-theme-color-primary-500), white 92%);
  --cts-theme-color-primary-100:  color-mix(in oklab, var(--cts-theme-color-primary-500), white 88%);
  --cts-theme-color-primary-200:  color-mix(in oklab, var(--cts-theme-color-primary-500), white 72%);
  --cts-theme-color-primary-300:  color-mix(in oklab, var(--cts-theme-color-primary-500), white 58%);
  --cts-theme-color-primary-400:  color-mix(in oklab, var(--cts-theme-color-primary-500), white 34%);
  --cts-theme-color-primary-600:  color-mix(in oklab, var(--cts-theme-color-primary-500), black 10%);
  --cts-theme-color-primary-700:  color-mix(in oklab, var(--cts-theme-color-primary-500), black 20%);
  --cts-theme-color-primary-800:  color-mix(in oklab, var(--cts-theme-color-primary-500), black 32%);
  --cts-theme-color-primary-900:  color-mix(in oklab, var(--cts-theme-color-primary-500), black 44%);
}

/* --- Secondary Ramp --- */
:root {
  --cts-theme-color-secondary-50:   color-mix(in oklab, var(--cts-theme-color-secondary-500), white 92%);
  --cts-theme-color-secondary-100:  color-mix(in oklab, var(--cts-theme-color-secondary-500), white 88%);
  --cts-theme-color-secondary-200:  color-mix(in oklab, var(--cts-theme-color-secondary-500), white 72%);
  --cts-theme-color-secondary-300:  color-mix(in oklab, var(--cts-theme-color-secondary-500), white 58%);
  --cts-theme-color-secondary-400:  color-mix(in oklab, var(--cts-theme-color-secondary-500), white 34%);
  --cts-theme-color-secondary-600:  color-mix(in oklab, var(--cts-theme-color-secondary-500), black 10%);
  --cts-theme-color-secondary-700:  color-mix(in oklab, var(--cts-theme-color-secondary-500), black 20%);
  --cts-theme-color-secondary-800:  color-mix(in oklab, var(--cts-theme-color-secondary-500), black 32%);
  --cts-theme-color-secondary-900:  color-mix(in oklab, var(--cts-theme-color-secondary-500), black 44%);
}

/* --- Accent Ramp --- */
:root {
  --cts-theme-color-accent-50:   color-mix(in oklab, var(--cts-theme-color-accent-500), white 92%);
  --cts-theme-color-accent-100:  color-mix(in oklab, var(--cts-theme-color-accent-500), white 88%);
  --cts-theme-color-accent-200:  color-mix(in oklab, var(--cts-theme-color-accent-500), white 72%);
  --cts-theme-color-accent-300:  color-mix(in oklab, var(--cts-theme-color-accent-500), white 58%);
  --cts-theme-color-accent-400:  color-mix(in oklab, var(--cts-theme-color-accent-500), white 34%);
  --cts-theme-color-accent-600:  color-mix(in oklab, var(--cts-theme-color-accent-500), black 10%);
  --cts-theme-color-accent-700:  color-mix(in oklab, var(--cts-theme-color-accent-500), black 20%);
  --cts-theme-color-accent-800:  color-mix(in oklab, var(--cts-theme-color-accent-500), black 32%);
  --cts-theme-color-accent-900:  color-mix(in oklab, var(--cts-theme-color-accent-500), black 44%);
}

/* --- Semantic Ramps (Success, Warning, Danger) --- */
:root {
  /* Success */
  --cts-theme-color-success-50:   color-mix(in oklab, var(--cts-theme-color-success-600), white 92%);
  --cts-theme-color-success-100:  color-mix(in oklab, var(--cts-theme-color-success-600), white 88%);
  --cts-theme-color-success-200:  color-mix(in oklab, var(--cts-theme-color-success-600), white 72%);
  --cts-theme-color-success-300:  color-mix(in oklab, var(--cts-theme-color-success-600), white 58%);
  --cts-theme-color-success-700:  color-mix(in oklab, var(--cts-theme-color-success-600), black 10%);
  --cts-theme-color-success-800:  color-mix(in oklab, var(--cts-theme-color-success-600), black 20%);
  
  /* Warning */
  --cts-theme-color-warning-50:   color-mix(in oklab, var(--cts-theme-color-warning-600), white 92%);
  --cts-theme-color-warning-100:  color-mix(in oklab, var(--cts-theme-color-warning-600), white 88%);
  --cts-theme-color-warning-200:  color-mix(in oklab, var(--cts-theme-color-warning-600), white 72%);
  --cts-theme-color-warning-300:  color-mix(in oklab, var(--cts-theme-color-warning-600), white 58%);
  --cts-theme-color-warning-700:  color-mix(in oklab, var(--cts-theme-color-warning-600), black 10%);
  --cts-theme-color-warning-800:  color-mix(in oklab, var(--cts-theme-color-warning-600), black 20%);

  /* Danger */
  --cts-theme-color-danger-50:    color-mix(in oklab, var(--cts-theme-color-danger-600), white 92%);
  --cts-theme-color-danger-100:   color-mix(in oklab, var(--cts-theme-color-danger-600), white 88%);
  --cts-theme-color-danger-200:   color-mix(in oklab, var(--cts-theme-color-danger-600), white 72%);
  --cts-theme-color-danger-300:   color-mix(in oklab, var(--cts-theme-color-danger-600), white 58%);
  --cts-theme-color-danger-700:   color-mix(in oklab, var(--cts-theme-color-danger-600), black 10%);
  --cts-theme-color-danger-800:   color-mix(in oklab, var(--cts-theme-color-danger-600), black 20%);
}

/* --- Neutral Ramp (LIGHT MODE) --- */
:root {
  --cts-theme-color-neutral-0:    #ffffff;
  --cts-theme-color-neutral-50:    color-mix(in oklab, var(--cts-theme-color-neutral-500), white 92%);
  --cts-theme-color-neutral-100:   color-mix(in oklab, var(--cts-theme-color-neutral-500), white 88%);
  --cts-theme-color-neutral-200:   color-mix(in oklab, var(--cts-theme-color-neutral-500), white 72%);
  --cts-theme-color-neutral-300:   color-mix(in oklab, var(--cts-theme-color-neutral-500), white 58%);
  --cts-theme-color-neutral-400:   color-mix(in oklab, var(--cts-theme-color-neutral-500), white 34%);
  --cts-theme-color-neutral-600:   color-mix(in oklab, var(--cts-theme-color-neutral-500), black 10%);
  --cts-theme-color-neutral-700:   color-mix(in oklab, var(--cts-theme-color-neutral-500), black 20%);
  --cts-theme-color-neutral-800:   color-mix(in oklab, var(--cts-theme-color-neutral-500), black 32%);
  --cts-theme-color-neutral-900:   color-mix(in oklab, var(--cts-theme-color-neutral-500), black 44%);
  --cts-theme-color-neutral-1000: #000000;
  
  /* Helper: Gradient Stops */
  --cts-theme-gradient-stop-1: var(--cts-theme-color-primary-200);
  --cts-theme-gradient-stop-2: var(--cts-theme-color-secondary-900);
  --cts-theme-gradient-stop-3: var(--cts-theme-color-neutral-1000);
}

/* --- Neutral Ramp (DARK MODE) --- */
:root[data-theme="dark"] {
  /* Switch base to the dark-optimized variable (tinted with primary) */
  --cts-theme-color-neutral-500: var(--cts-theme-color-neutral-500--dark);

  /* Re-calculate the ramp radiating from the Dark Base */
  --cts-theme-color-neutral-0:     color-mix(in oklab, var(--cts-theme-color-neutral-500), black 92%);
  --cts-theme-color-neutral-50:    color-mix(in oklab, var(--cts-theme-color-neutral-500), black 88%);
  --cts-theme-color-neutral-100:   color-mix(in oklab, var(--cts-theme-color-neutral-500), black 80%);
  --cts-theme-color-neutral-200:   color-mix(in oklab, var(--cts-theme-color-neutral-500), black 66%);
  --cts-theme-color-neutral-300:   color-mix(in oklab, var(--cts-theme-color-neutral-500), black 52%);
  --cts-theme-color-neutral-400:   color-mix(in oklab, var(--cts-theme-color-neutral-500), black 36%);
  --cts-theme-color-neutral-600:   color-mix(in oklab, var(--cts-theme-color-neutral-500), white 10%);
  --cts-theme-color-neutral-700:   color-mix(in oklab, var(--cts-theme-color-neutral-500), white 20%);
  --cts-theme-color-neutral-800:   color-mix(in oklab, var(--cts-theme-color-neutral-500), white 32%);
  --cts-theme-color-neutral-900:   color-mix(in oklab, var(--cts-theme-color-neutral-500), white 44%);
  --cts-theme-color-neutral-1000: #ffffff;
}

/* ---------------------------------------------------------
  == Typography Scales
   --------------------------------------------------------- */

:root {
  --cts-theme-font-size-2x-small: 10px;
  --cts-theme-font-size-x-small:  12px;
  --cts-theme-font-size-small:    14px;
  --cts-theme-font-size-medium:   16px;
  --cts-theme-font-size-large:    18px;
  --cts-theme-font-size-x-large:  21px;
  --cts-theme-font-size-2x-large: 24px;

  --cts-theme-line-height-dense:  1.2;
  --cts-theme-line-height-normal: 1.5;
  --cts-theme-line-height-loose:  1.7;

  --cts-theme-title-1-size: var(--cts-theme-font-size-2x-large);
  --cts-theme-title-2-size: var(--cts-theme-font-size-x-large);
  --cts-theme-title-3-size: var(--cts-theme-font-size-large);
  --cts-theme-title-4-size: var(--cts-theme-font-size-medium);

  --cts-theme-title-weight-bold: 700;
  --cts-theme-title-weight-semi: 600;

  /* Keep these as static pixels! */
  /* @see `Conturalis_Theme::enqueue_utility_booster` for mobile resposiveness */

  --cts-theme-heading-1-size: 64px;
  --cts-theme-heading-2-size: 48px;
  --cts-theme-heading-3-size: 40px;
  --cts-theme-heading-4-size: 32px;

  --cts-theme-heading-weight: 700;
}
/* ---------------------------------------------------------
  == Spacing, Radii, Shadows
   --------------------------------------------------------- */

:root {
  /* Spacing */
  --cts-theme-spacing-2x-small: .25rem;
  --cts-theme-spacing-x-small:  .5rem;
  --cts-theme-spacing-small:    .75rem;
  --cts-theme-spacing-medium:   1rem;
  --cts-theme-spacing-large:    1.5rem;
  --cts-theme-spacing-x-large:  2rem;
  --cts-theme-spacing-2x-large: 3rem;
  --cts-theme-spacing-3x-large: 4.5rem;

  /* Radii */
  --cts-theme-border-radius-none:   0px;
  --cts-theme-border-radius-small:  3px;
  --cts-theme-border-radius-medium: 10px;
  --cts-theme-border-radius-large:  16px;
  --cts-theme-border-radius-circle: 9999px;

  /* Shadows */
  --cts-theme-shadow-x-small: 0 1px 2px rgb(0 0 0 / .06);
  --cts-theme-shadow-small:   0 2px 8px rgb(0 0 0 / .08);
  --cts-theme-shadow-medium:  0 8px 24px rgb(0 0 0 / .10);
  --cts-theme-shadow-large:   0 20px 40px rgb(0 0 0 / .16);

  /* Focus ring */
  --cts-theme-focus-ring-color: var(--cts-theme-color-neutral-200);
  --cts-theme-focus-ring-style: solid;
  --cts-theme-focus-ring-width: 2px;
  --cts-theme-focus-ring-alpha: .45;

  /* Component tweaks */
  --cts-theme-button-border-radius-medium: var(--cts-theme-border-radius-medium);
  --cts-theme-input-border-radius-medium:  var(--cts-theme-border-radius-medium);
  --cts-theme-input-focus-ring-offset: 2px;
  --cts-theme-panel-border-radius: var(--cts-theme-border-radius-large);
}

:root[data-theme="dark"] {
  --cts-theme-focus-ring-alpha: .35;
}

/* ---------------------------------------------------------
  == Containers & Breakpoints
   --------------------------------------------------------- */

:root {
  /* Containers */
  --cts-theme-container-max-width-xsm: 600px;
  --cts-theme-container-max-width-sm:  750px;
  --cts-theme-container-max-width-md:  900px;
  --cts-theme-container-max-width-lg:  1120px;
  --cts-theme-container-max-width-xl:  1280px;
  --cts-theme-container-max-width-2xl: 1440px;
  
  /* Breakpoints (Matches Elementor Defaults) */
  --cts-breakpoint-mobile:  639px;
  --cts-breakpoint-tablet:  1024px;
  --cts-breakpoint-desktop: 1280px;
  --cts-breakpoint-wide:    1600px;
}

/* ---------------------------------------------------------
  == Semantic Layout
   --------------------------------------------------------- */

:root {
  /* --- Section Heights (Smart Capping) --- */
  
  --cts-theme-height-xs: min(30vh, 300px);
  --cts-theme-height-sm: min(50vh, 400px);
  --cts-theme-height-md: min(60vh, 600px);
  --cts-theme-height-lg: min(75vh, 750px);
  --cts-theme-height-screen: min(100vh, 1080px);


  /* --- Section Heights (Smart Capping) --- */
  
  --cts-theme-pad-sec-y-sm: var(--cts-theme-spacing-x-small);
  --cts-theme-pad-sec-y-md: var(--cts-theme-spacing-small);
  --cts-theme-pad-sec-y-lg: clamp(60px, 8vw, 120px);
  --cts-theme-pad-sec-y-xl: clamp(80px, 10vw, 160px);


  /* --- Responsive Section Gutters (X-Axis / Horizontal) --- */

  --cts-theme-pad-sec-x-sm: var(--cts-theme-spacing-x-small);
  --cts-theme-pad-sec-x-md: clamp(20px, 5vw, 48px);
  --cts-theme-pad-sec-x-lg: clamp(24px, 8vw, 80px);

    /* Button Dimensions */
  --cts-theme-btn-min-h: 44px;
  --cts-theme-btn-pad-x: 20px;
  --cts-theme-btn-font: 16px;
  --cts-theme-btn-radius: 9999px;
  --cts-theme-btn-outline-w: 2px;

  /* Button Dimensions (Mobile) */
  --cts-theme-btn-min-h-sm: 40px;
  --cts-theme-btn-pad-x-sm: 16px;
  --cts-theme-btn-font-sm: 15px;
  --cts-theme-btn-outline-w-sm: 1.5px;
  
}