/* file: flowtitude.css */

@layer base {
  :root {
    /* ============================================================
       1) RANGES / KNOBS (configuration only)
       These variables are the "inputs" that define the system.
       ============================================================ */

    /* Viewport range used for fluid interpolation */
    --viewport-min: 410px;
    --viewport-max: 1280px;

    /* Base typography (size range + scaling ratio range) */
    --ft-text-min: 1rem;
    --ft-text-max: 1.125rem;

    --ft-type-step-min: 1.125;
    --ft-type-step-max: 1.2;

    /* Global text multiplier (density / compact mode) */
    --ft-text-factor: 1;

    /* Base spacing (size range + scaling ratio range) */
    --ft-space-min: 0.5rem;
    --ft-space-max: 1.5rem;

    /* Single fluid ratio used to step spacing up/down */
    --ft-space-step-min: 1.3;
    --ft-space-step-max: 1.5;

    /* Global spacing multiplier */
    --ft-space-factor: 1;

    /* Semantic multipliers (used to build meaningful tokens) */
    --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-columns);
    --ft-gap-content: var(--spacing-block);

    /* Base colors (mapped to fg/bg tokens inside @theme) */
    --ft-color-text: #000;
    --ft-color-background: #fff;

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

    /* ============================================================
    BUTTONS
    ============================================================ */

    /* Color de texto por variante */
    --btn-primary-color:   var(--color-neutral-100);
    --btn-secondary-color: var(--color-neutral-100);

    /* Outline: superficie, borde y texto */
    --btn-outline-bg:      transparent;
    --btn-outline-border:  currentColor;
    --btn-outline-color:   var(--color-neutral-800);

    /* Padding en em */
    --btn-py: 0.6em;
    --btn-px: 1.75em;

    /* ============================================================
       2) DERIVED VALUES (computed from knobs)
       These should not be edited directly.
       ============================================================ */

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

    /* Fluid base text size */
    --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)
    );

    /* Fluid type scaling ratio */
    --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)
    );

    /* Fluid base spacing value */
    --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)
    );

    /* Fluid spacing scaling ratio */
    --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, Arial, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    --font-display: var(--font-body);

    /* ============================================================
       PALETTE (kept as-is)
       Note: pick whether --color-primary should be a real "primary"
       (e.g. 600/700) or a softer default (e.g. 100).
       ============================================================ */
    --color-primary-50: oklch(0.963 0.015 207);
    --color-primary-100: oklch(0.924 0.034 201.16);
    --color-primary-200: oklch(0.854 0.063 201.05);
    --color-primary-300: oklch(0.781 0.089 201.89);
    --color-primary-400: oklch(0.709 0.104 203.1);
    --color-primary-500: oklch(0.574 0.083 202.51);
    --color-primary-600: oklch(0.521 0.075 202.32);
    --color-primary-700: oklch(0.474 0.068 201.96);
    --color-primary-800: oklch(0.425 0.06 203.07);
    --color-primary-900: oklch(0.364 0.05 203.03);
    --color-primary-950: oklch(0.34 0.046 201.74);

    --color-secondary-50: oklch(0.962 0.012 236.57);
    --color-secondary-100: oklch(0.931 0.022 234.97);
    --color-secondary-200: oklch(0.857 0.046 233.09);
    --color-secondary-300: oklch(0.789 0.069 235.48);
    --color-secondary-400: oklch(0.717 0.093 235.43);
    --color-secondary-500: oklch(0.652 0.112 237.78);
    --color-secondary-600: oklch(0.585 0.109 238.74);
    --color-secondary-700: oklch(0.517 0.096 239.04);
    --color-secondary-800: oklch(0.439 0.078 237.86);
    --color-secondary-900: oklch(0.366 0.063 238.15);
    --color-secondary-950: oklch(0.325 0.054 236.76);

    --color-teal-50: #eefbfc;
    --color-teal-100: #d5f5f7;
    --color-teal-200: #b0ecf0;
    --color-teal-300: #7ed0d6;
    --color-teal-400: #4db8bf;
    --color-teal-500: #2d878e;
    --color-teal-600: #236d73;
    --color-teal-700: #1c575d;
    --color-teal-800: #17474c;
    --color-teal-900: #123b40;
    --color-teal-950: #0a2528;

    --color-navy-50: #f0f5fa;
    --color-navy-100: #dce8f3;
    --color-navy-200: #bdd3e9;
    --color-navy-300: #8fb5d9;
    --color-navy-400: #5a90c4;
    --color-navy-500: #3a72ad;
    --color-navy-600: #005081;
    --color-navy-700: #004a77;
    --color-navy-800: #003f64;
    --color-navy-900: #003554;
    --color-navy-950: #002238;

    --color-sand-50: #fafaf8;
    --color-sand-100: #f4f4f0;
    --color-sand-200: #e8e8e0;
    --color-sand-300: #d5d5ca;
    --color-sand-400: #b8b8a8;
    --color-sand-500: #9a9a86;
    --color-sand-600: #005081;
    --color-sand-700: #004a77;
    --color-sand-800: #003f64;
    --color-sand-900: #003554;
    --color-sand-950: #002238;

    /* Flat defaults (choose the ones you want as "brand defaults") */
    --color-secondary: var(--color-secondary-500);
    --color-primary: var(--color-primary-500);

    /* ============================================================
       TYPOGRAPHY (leading + sizes)
       ============================================================ */
  
    --leading-none: 1em;
    --leading-tight: 1.2em;
    --leading-snug: 1.375em;
    --leading-normal: 1.5em;
    --leading-relaxed: 1.625em;
    --leading-loose: 2em;

    --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 (base + fluid scale + semantic tokens)
       Tailwind v4 will generate utilities like: p-inner, gap-content, etc.
       ============================================================ */
    --spacing: 0.25rem;

    /* Fluid scale (xs → 2xl) around ft-space-value */
    --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 tokens */
    --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));

   /* ============================================================
      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;
}