/**
 * Flowtitude Design System - Theme Configuration
 * Editado desde Flowtitude → Design System
 */

@layer base {
  :root {
    /* ============================================================
       1) RANGES / KNOBS (configuration only)
       ============================================================ */

    /* Viewport range */
    --viewport-min: 410px;
    --viewport-max: 1280px;

    /* Base typography */
    --ft-text-min: 1rem;
    --ft-text-max: 1.125rem;
    --ft-type-step-min: 1.125;
    --ft-type-step-max: 1.2;
    --ft-text-factor: 1;

    /* Base spacing */
    --ft-space-min: 0.5rem;
    --ft-space-max: 1.5rem;
    --ft-space-step-min: 1.3;
    --ft-space-step-max: 1.5;
    --ft-space-factor: 1;

    /* Semantic spacing multipliers */
    --ft-space-factor-inner: 0.5;
    --ft-space-factor-content: 0.75;
    --ft-space-factor-stack: 1;
    --ft-space-factor-block: 1;
    --ft-space-factor-columns: 1.5;
    --ft-space-factor-section: 3;
    --ft-space-factor-hero: 4.5;

    /* Layout defaults */
    --ft-container: min(var(--container-7xl), 90%);
    --ft-padding-content-x: 1rem;
    --ft-padding-content-y: var(--spacing-section);
    --ft-gap-content: var(--spacing-block);

    /* Base colors */
    --ft-color-text: #000;
    --ft-color-background: #f9ecec;

    /* Card widths */
    --ft-card-xs: 12rem;
    --ft-card-sm: 14rem;
    --ft-card-md: 18rem;
    --ft-card-lg: 24rem;
    --ft-card-xl: 36rem;

    /* Buttons */
    --btn-primary-color: var(--color-neutral-100);
    --btn-secondary-color: var(--color-neutral-100);
    --btn-outline-bg: transparent;
    --btn-outline-border: currentColor;
    --btn-outline-color: var(--color-neutral-800);
    --btn-py: 0.6em;
    --btn-px: 1.75em;

    /* ============================================================
       2) DERIVED VALUES (computed from knobs)
       ============================================================ */

    --ft-fluid-t: calc(
      (100vw - var(--viewport-min)) /
      (var(--viewport-max) - var(--viewport-min))
    );

    --ft-text-value: clamp(
      var(--ft-text-min),
      calc(var(--ft-text-min) + (var(--ft-text-max) - var(--ft-text-min)) * var(--ft-fluid-t)),
      var(--ft-text-max)
    );

    --ft-type-step: clamp(
      var(--ft-type-step-min),
      calc(var(--ft-type-step-min) + (var(--ft-type-step-max) - var(--ft-type-step-min)) * var(--ft-fluid-t)),
      var(--ft-type-step-max)
    );

    --ft-space-value: clamp(
      var(--ft-space-min),
      calc(var(--ft-space-min) + (var(--ft-space-max) - var(--ft-space-min)) * var(--ft-fluid-t)),
      var(--ft-space-max)
    );

    --ft-space-step: clamp(
      var(--ft-space-step-min),
      calc(var(--ft-space-step-min) + (var(--ft-space-step-max) - var(--ft-space-step-min)) * var(--ft-fluid-t)),
      var(--ft-space-step-max)
    );
  }
}

@theme {

    /* Fonts */
    --font-body: 'Helvetica';
    --font-display: 'Stack Sans Notch';

    --color-primary-50: oklch(0.9584942355639992 0.01644214965876732 8.167281588047654);
    --color-primary-100: oklch(0.9006018095703946 0.043211149880240184 7.260755341420402);
    --color-primary-200: oklch(0.8104353900714467 0.08982215464788976 6.980835738451096);
    --color-primary-300: oklch(0.7318197457599037 0.13991576278293322 7.633869994985437);
    --color-primary-400: oklch(0.6566267216070231 0.19606565631093165 8.048914743138978);
    --color-primary-500: oklch(0.5806238042674535 0.19665912418008177 8.44834829905388);
    --color-primary-600: oklch(0.5027990562577188 0.1707311784132314 8.103086090372074);
    --color-primary-700: oklch(0.4263770828944758 0.1446808640096346 8.305538171231056);
    --color-primary-800: oklch(0.3505059664471047 0.11958261297677043 8.46796735976333);
    --color-primary-900: oklch(0.2460191070401964 0.08389904011150123 7.8834093121365765);
    --color-primary-950: oklch(0.18429916210300587 0.0640478520597945 8.009365198972258);
    
    --color-secondary-50: oklch(0.9582962650641691 0.005087808032942555 325.6161157311731);
    --color-secondary-100: oklch(0.894765885080406 0.014515977824595896 329.13622451685507);
    --color-secondary-200: oklch(0.7962161856971942 0.02990987082229513 329.3740056965665);
    --color-secondary-300: oklch(0.7100987008446634 0.04432894700299058 329.7932115161108);
    --color-secondary-400: oklch(0.6279207324341999 0.05049254274663351 328.4661390638204);
    --color-secondary-500: oklch(0.5467165755349814 0.04254863086044701 328.969210938748);
    --color-secondary-600: oklch(0.468848384436484 0.038139921708242736 329.4554812398509);
    --color-secondary-700: oklch(0.39354848521226593 0.031408299310741114 330.3244610546641);
    --color-secondary-800: oklch(0.31879891994554416 0.025455318128460747 328.8648793085596);
    --color-secondary-900: oklch(0.2363566846022277 0.0202275904225173 329.890645878771);
    --color-secondary-950: oklch(0.17837781436626027 0.014003650920229668 331.84243434943437);

    /* Flat defaults */
    --color-secondary: var(--color-secondary-500);
    --color-primary: var(--color-primary-600);

    /* Leading */
    --leading-none: 1em;
    --leading-tight: 1.2em;
    --leading-snug: 1.375em;
    --leading-normal: 1.5em;
    --leading-relaxed: 1.625em;
    --leading-loose: 2em;

    /* Radius */
    --radius-button: var(--radius-sm);
    --radius-card: var(--radius-md);
    --radius-section: var(--radius-md);

    /* Aspect ratios */
    --aspect-rrss: 1.91 / 1;
    --aspect-wide: 18 / 8;
    --aspect-ultrawide: 18 / 5;
    --aspect-golden: 1.618 / 1;
    --aspect-portrait: 3 / 4;
    --aspect-landscape: 4 / 3;

    /* Typography scale (computed) */
    --text-base: calc(var(--ft-text-value) * var(--ft-text-factor));
    --text-sm: calc(var(--text-base) / var(--ft-type-step));
    --text-xs: calc(var(--text-sm) / var(--ft-type-step));
    --text-lg: calc(var(--text-base) * var(--ft-type-step));
    --text-xl: calc(var(--text-lg) * var(--ft-type-step));
    --text-2xl: calc(var(--text-xl) * var(--ft-type-step));
    --text-3xl: calc(var(--text-2xl) * var(--ft-type-step));
    --text-4xl: calc(var(--text-3xl) * var(--ft-type-step));
    --text-5xl: calc(var(--text-4xl) * var(--ft-type-step));
    --text-6xl: calc(var(--text-5xl) * var(--ft-type-step));
    --text-7xl: calc(var(--text-6xl) * var(--ft-type-step));
    --text-8xl: calc(var(--text-7xl) * var(--ft-type-step));
    --text-9xl: calc(var(--text-8xl) * var(--ft-type-step));

    /* Spacing scale (computed) */
    --spacing: 0.25rem;

    --spacing-fluid-md: calc(var(--ft-space-value) * var(--ft-space-factor));
    --spacing-fluid-sm: calc(var(--spacing-fluid-md) / var(--ft-space-step));
    --spacing-fluid-xs: calc(var(--spacing-fluid-sm) / var(--ft-space-step));
    --spacing-fluid-lg: calc(var(--spacing-fluid-md) * var(--ft-space-step));
    --spacing-fluid-xl: calc(var(--spacing-fluid-lg) * var(--ft-space-step));
    --spacing-fluid-2xl: calc(var(--spacing-fluid-xl) * var(--ft-space-step));

    /* Semantic spacing (computed) */
    --spacing-inner: calc(var(--spacing-fluid-xs) * var(--ft-space-factor-inner));
    --spacing-content: calc(var(--spacing-fluid-sm) * var(--ft-space-factor-content));
    --spacing-stack: calc(var(--spacing-fluid-sm) * var(--ft-space-factor-stack));
    --spacing-block: calc(var(--spacing-fluid-md) * var(--ft-space-factor-block));
    --spacing-columns: calc(var(--spacing-fluid-md) * var(--ft-space-factor-columns));
    --spacing-section: calc(var(--spacing-fluid-xl) * var(--ft-space-factor-section));
    --spacing-hero: calc(var(--spacing-fluid-2xl) * var(--ft-space-factor-hero));
}