/* ============================================================
   StockMedia — Design tokens (StockPlatform DS)
   Fuente: /projects/ad1c2e69-0187-4ede-b1b2-455abf2c30d6
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

/* ── Dark mode (default) ── */
:root {
  /* Neutrals — charcoal ramp (#222a30 base) */
  --gray-950: #171d22;
  --gray-900: #222a30;
  --gray-850: #29323a;
  --gray-800: #2f3941;
  --gray-700: #3c474e;
  --gray-600: #586265;
  --gray-500: #6f797c;
  --gray-400: #96999a;
  --gray-300: #b9bcbd;
  --gray-200: #d3d5d6;
  --gray-100: #eceded;
  --gray-50:  #f6f6f7;
  --white:    #ffffff;
  --black:    #000000;

  /* Brand ramp — teal-blue (#164b6b principal) mapped onto indigo-* */
  --indigo-900: #0c2a3c;
  --indigo-800: #103a54;
  --indigo-700: #124260;
  --indigo-600: #164b6b;
  --indigo-500: #4eacc5;
  --indigo-400: #9adef0;
  --indigo-300: #b9e8f5;
  --indigo-200: #d5f2f9;

  /* Accent ramp — cyan (#4eacc5) mapped onto sky-* */
  --sky-600: #3f96ad;
  --sky-500: #4eacc5;
  --sky-400: #6fc3d8;
  --sky-300: #9adef0;

  /* Status hues */
  --green-500: #22c55e;
  --green-400: #4ade80;
  --green-300: #86efac;
  --amber-500: #eab308;
  --amber-400: #facc15;
  --amber-300: #fde047;
  --blue-500:  #3b82f6;
  --blue-400:  #60a5fa;
  --blue-300:  #93c5fd;
  --red-500:   #ef4444;
  --red-400:   #f87171;
  --red-300:   #fca5a5;

  /* Surfaces */
  --bg-app:          var(--gray-900);
  --bg-raised:       var(--gray-850);
  --surface-card:    var(--gray-800);
  --surface-input:   var(--gray-700);
  --surface-hover:   rgba(55, 65, 81, 0.40);
  --surface-overlay: rgba(0, 0, 0, 0.50);
  --surface-thead:   rgba(17, 24, 39, 0.50);

  /* Text */
  --text-strong:  var(--gray-100);
  --text-body:    var(--gray-300);
  --text-muted:   var(--gray-400);
  --text-subtle:  var(--gray-500);
  --text-onbrand: var(--white);
  --text-link:    var(--indigo-400);

  /* Borders */
  --border-default: var(--gray-700);
  --border-control: var(--gray-600);
  --border-strong:  var(--gray-500);

  /* Brand */
  --brand:          var(--indigo-600);
  --brand-hover:    var(--indigo-700);
  --brand-active:   var(--indigo-800);
  --brand-ring:     var(--indigo-500);
  --brand-on-dark:  var(--indigo-400);
  --accent:         var(--sky-500);

  /* Status badges */
  --status-pending-bg:  var(--gray-700);
  --status-pending-fg:  var(--gray-200);
  --status-review-bg:   rgba(113, 63, 18, 0.40);
  --status-review-fg:   var(--amber-300);
  --status-done-bg:     rgba(30, 58, 138, 0.40);
  --status-done-fg:     var(--blue-300);
  --status-finished-bg: rgba(20, 83, 45, 0.40);
  --status-finished-fg: var(--green-300);
  --status-danger-bg:   rgba(127, 29, 29, 0.40);
  --status-danger-fg:   var(--red-300);

  /* Typography */
  --font-sans: 'Figtree', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;
  --text-6xl:  3.75rem;
  --text-7xl:  4.5rem;
  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;
  --tracking-tighter: -0.03em;
  --tracking-tight:   -0.015em;
  --tracking-normal:  0;
  --tracking-wide:    0.025em;
  --tracking-widest:  0.18em;
  --display-font:     var(--font-sans);
  --display-weight:   var(--weight-extrabold);
  --display-tracking: var(--tracking-tighter);
  --heading-weight:   var(--weight-semibold);
  --eyebrow-tracking: var(--tracking-widest);

  /* Spacing */
  --space-0:  0;
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.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;
  --container-max: 80rem;
  --sidebar-width:  16rem;
  --topbar-height:  4rem;
  --gutter: 1.5rem;

  /* Radii */
  --radius-xs:   0.25rem;
  --radius-sm:   0.375rem;
  --radius-md:   0.5rem;
  --radius-lg:   0.75rem;
  --radius-xl:   1rem;
  --radius-pill: 9999px;

  /* Shadows */
  --shadow-sm:    0 1px 2px 0 rgba(0,0,0,0.30);
  --shadow:       0 1px 3px 0 rgba(0,0,0,0.40), 0 1px 2px -1px rgba(0,0,0,0.40);
  --shadow-md:    0 4px 6px -1px rgba(0,0,0,0.45), 0 2px 4px -2px rgba(0,0,0,0.45);
  --shadow-lg:    0 10px 15px -3px rgba(0,0,0,0.50), 0 4px 6px -4px rgba(0,0,0,0.50);
  --shadow-xl:    0 20px 25px -5px rgba(0,0,0,0.55), 0 8px 10px -6px rgba(0,0,0,0.55);
  --shadow-brand: 0 8px 24px -6px rgba(22,75,107,0.60);
  --ring-brand:   0 0 0 2px var(--gray-900), 0 0 0 4px var(--brand-ring);

  /* Motion */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:      cubic-bezier(0, 0, 0.2, 1);
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);
  --duration-fast: 120ms;
  --duration:      200ms;
  --duration-slow: 320ms;
}

/* ── Light mode overrides ── */
[data-theme="light"] {
  --bg-app:          var(--gray-100);
  --bg-raised:       var(--white);
  --surface-card:    var(--white);
  --surface-input:   var(--gray-100);
  --surface-hover:   rgba(0, 0, 0, 0.04);
  --surface-thead:   rgba(243, 244, 246, 0.80);
  --text-strong:     var(--gray-900);
  --text-body:       var(--gray-700);
  --text-muted:      var(--gray-500);
  --text-subtle:     var(--gray-400);
  --border-default:  var(--gray-200);
  --border-control:  var(--gray-300);
  --border-strong:   var(--gray-400);
  --shadow-sm:       0 1px 2px 0 rgba(0,0,0,0.06);
  --shadow:          0 1px 3px 0 rgba(0,0,0,0.10), 0 1px 2px -1px rgba(0,0,0,0.06);
  --shadow-md:       0 4px 6px -1px rgba(0,0,0,0.08), 0 2px 4px -2px rgba(0,0,0,0.05);
  --shadow-lg:       0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -4px rgba(0,0,0,0.05);
  --shadow-xl:       0 20px 25px -5px rgba(0,0,0,0.10), 0 8px 10px -6px rgba(0,0,0,0.05);
  --ring-brand:      0 0 0 2px var(--white), 0 0 0 4px var(--brand-ring);
}