/* ================================================================
   INCREACITY — tokens CSS (sin reset ni componentes .ic-*)
   Paleta default = configs del proyecto (cyan #06B6FF, navy #000E3D).
   No importar logos del UI Kit. Theming runtime en head.blade.php.
   ================================================================ */

:root {
  --ic-navy: #000E3D;
  --ic-cyan: #06B6FF;
  --ic-white: #FFFFFF;
  --ic-black: #000000;

  --ic-navy-900: #000E3D;
  --ic-navy-800: #1A2451;
  --ic-navy-700: #333D64;
  --ic-navy-600: #596281;
  --ic-navy-500: #80879E;
  --ic-navy-400: #A6ABBB;
  --ic-navy-300: #CCCFD8;
  --ic-navy-200: #E3E5EB;
  --ic-navy-100: #EFF0F4;
  --ic-navy-50:  #F7F8FA;

  --ic-cyan-900: #024A6B;
  --ic-cyan-800: #036E9E;
  --ic-cyan-700: #0492CF;
  --ic-cyan-600: #05A6EA;
  --ic-cyan-500: #06B6FF;
  --ic-cyan-400: #38C4FF;
  --ic-cyan-300: #69D1FF;
  --ic-cyan-200: #9BE0FF;
  --ic-cyan-100: #CDEFFF;
  --ic-cyan-50:  #EBF8FF;

  --ic-success: #0EA47A;
  --ic-success-soft: #E4F6F0;
  --ic-warning: #F2A413;
  --ic-warning-soft: #FDF1DC;
  --ic-danger: #E0413F;
  --ic-danger-soft: #FBE6E6;
  --ic-info: var(--ic-cyan-500);
  --ic-info-soft: var(--ic-cyan-50);

  --surface-page: var(--ic-navy-50);
  --surface-card: var(--ic-white);
  --surface-raised: var(--ic-white);
  --surface-sunken: var(--ic-navy-100);
  --surface-inverse: var(--ic-navy-900);
  --surface-brand: var(--ic-cyan-500);
  --surface-disabled: var(--ic-navy-200);

  --text-title: var(--ic-navy-900);
  --text-body: var(--ic-navy-800);
  --text-muted: var(--ic-navy-600);
  --text-placeholder: var(--ic-navy-500);
  --text-on-brand: var(--ic-white);
  --text-on-inverse: var(--ic-white);
  --text-link: var(--ic-cyan-700);
  --text-link-hover: var(--ic-navy-900);
  --text-disabled: var(--ic-navy-500);

  --border-subtle: var(--ic-navy-200);
  --border-default: var(--ic-navy-300);
  --border-strong: var(--ic-navy-600);
  --border-brand: var(--ic-cyan-500);
  --border-focus: var(--ic-cyan-500);

  --gradient-brand: linear-gradient(135deg, var(--ic-navy-900) 0%, var(--ic-cyan-700) 100%);
  --gradient-cyan: linear-gradient(135deg, var(--ic-cyan-600) 0%, var(--ic-cyan-300) 100%);
  --overlay-scrim: rgba(0, 14, 61, .64);

  --font-heading: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Poppins", "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "Menlo", monospace;

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 900;

  --text-2xs: .6875rem;
  --text-xs: .75rem;
  --text-sm: .875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.25rem;
  --text-4xl: 3rem;
  --text-5xl: 3.75rem;

  --leading-tight: 1.1;
  --leading-snug: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;

  --tracking-tight: -.02em;
  --tracking-normal: 0;
  --tracking-wide: .04em;
  --tracking-caps: .12em;

  --space-0: 0;
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  --space-xs: var(--space-2);
  --space-sm: var(--space-3);
  --space-md: var(--space-4);
  --space-lg: var(--space-6);
  --space-xl: var(--space-10);

  --gutter: var(--space-4);
  --section-y: var(--space-12);
  --logo-clearspace: 2;
  --logo-min-digital: 150px;

  --control-h-sm: 2.25rem;
  --control-h-md: 2.75rem;
  --control-h-lg: 3.25rem;

  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  --border-width: 1px;
  --border-width-strong: 2px;

  --shadow-xs: 0 1px 2px rgba(0, 14, 61, .06);
  --shadow-sm: 0 2px 8px rgba(0, 14, 61, .08);
  --shadow-md: 0 8px 24px rgba(0, 14, 61, .10);
  --shadow-lg: 0 18px 48px rgba(0, 14, 61, .14);
  --shadow-brand: 0 10px 28px color-mix(in srgb, var(--ic-cyan) 32%, transparent);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, .5);
  --ring-focus: 0 0 0 3px color-mix(in srgb, var(--ic-cyan) 38%, transparent);

  --ease-standard: cubic-bezier(.2, 0, 0, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 360ms;
  --transition-base: border-color var(--duration-base) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out),
    background-color var(--duration-base) var(--ease-out),
    color var(--duration-base) var(--ease-out),
    transform var(--duration-base) var(--ease-out);
}

@media (min-width: 768px) {
  :root {
    --text-2xl: 2rem;
    --text-3xl: 2.75rem;
    --text-4xl: 3.75rem;
    --text-5xl: 5rem;
    --gutter: var(--space-6);
    --section-y: var(--space-20);
  }
}

.ic-theme-dark,
[data-theme="dark"] {
  --surface-page: var(--ic-navy-900);
  --surface-card: #0A1846;
  --surface-raised: #12205A;
  --surface-sunken: #000B31;
  --surface-inverse: var(--ic-white);
  --text-title: var(--ic-white);
  --text-body: #D8DCE8;
  --text-muted: var(--ic-navy-400);
  --text-placeholder: var(--ic-navy-500);
  --text-on-inverse: var(--ic-navy-900);
  --text-link: var(--ic-cyan-400);
  --text-link-hover: var(--ic-cyan-200);
  --border-subtle: rgba(255, 255, 255, .12);
  --border-default: rgba(255, 255, 255, .22);
  --border-strong: rgba(255, 255, 255, .44);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}
