/* =====================================================================
   ORBIT DESIGN SYSTEM — TOKENS
   Source of truth: Orbit_Design_System_Reference.md + Figma file
   Dark mode é o modo padrão. Light mode é alternativa via [data-theme="light"]
   ===================================================================== */

:root {
  /* --------------------------------------------------------------------
     PRIMITIVES — raw color ramps. Não usar diretamente em componentes;
     bind apenas via semantics abaixo.
     -------------------------------------------------------------------- */

  /* Neutral — subtom quente (leve amarelado) */
  --color-neutral-950: #0C0C0E;
  --color-neutral-900: #121214;
  --color-neutral-850: #1A1A1E;
  --color-neutral-800: #28282C;
  --color-neutral-700: #3A3A3E;
  --color-neutral-500: #6B6B66;
  --color-neutral-400: #8A8A86;
  --color-neutral-300: #AEAEA8;
  --color-neutral-200: #D6D5D0;
  --color-neutral-100: #F0F0EC;
  --color-neutral-50:  #F6F5F1;
  --color-neutral-0:   #FAFAF8;

  /* Terracotta — acento primário (CTAs, foco) */
  --color-terracotta-50:  #FDF0EB;
  --color-terracotta-200: #F5B08A;
  --color-terracotta-500: #E05520;
  --color-terracotta-700: #B8431A;
  --color-terracotta-900: #7A2E10;

  /* Petrol — acento secundário (info, links secundários) */
  --color-petrol-50:  #E4F0F5;
  --color-petrol-400: #4A9FBD;
  --color-petrol-600: #1E6E8C;
  --color-petrol-800: #14465A;

  /* Raw feedback bases — alimentam os feedback semantics */
  --color-raw-success-base: #3D9A6D;
  --color-raw-warning-base: #D4952C;
  --color-raw-error-base:   #C94444;

  /* --------------------------------------------------------------------
     SEMANTICS — DARK MODE (default)
     Use SEMPRE estes em componentes, nunca primitives diretamente.
     -------------------------------------------------------------------- */

  /* Background */
  --color-bg-primary:   var(--color-neutral-900);
  --color-bg-secondary: var(--color-neutral-850);
  --color-bg-elevated:  var(--color-neutral-850);
  --color-bg-inverse:   var(--color-neutral-50);

  /* Text */
  --color-text-primary:     var(--color-neutral-0);
  --color-text-secondary:   var(--color-neutral-400);
  --color-text-tertiary:    var(--color-neutral-500);
  --color-text-placeholder: var(--color-neutral-500);
  --color-text-inverse:     var(--color-neutral-900);
  --color-text-on-action:   var(--color-neutral-0);

  /* Border */
  --color-border-subtle:  var(--color-neutral-850);
  --color-border-default: var(--color-neutral-800);
  --color-border-active:  var(--color-neutral-700);
  --color-border-focus:   var(--color-terracotta-500);

  /* Action (CTAs, foco principal) */
  --color-action-primary:           var(--color-terracotta-500);
  --color-action-primary-hover:     var(--color-terracotta-700);
  --color-action-primary-bg-subtle: var(--color-terracotta-50);

  /* Accent (info, links secundários) */
  --color-accent-info:        var(--color-petrol-400);
  --color-accent-info-strong: var(--color-petrol-600);
  --color-accent-info-bg:     var(--color-petrol-50);

  /* Feedback */
  --color-feedback-success:    var(--color-raw-success-base);
  --color-feedback-success-bg: #E5F1EA;
  --color-feedback-warning:    var(--color-raw-warning-base);
  --color-feedback-warning-bg: #F9EFD5;
  --color-feedback-error:      var(--color-raw-error-base);
  --color-feedback-error-bg:   #F8DCDC;
  --color-feedback-info:       var(--color-petrol-400);
  --color-feedback-info-bg:    var(--color-petrol-50);

  /* --------------------------------------------------------------------
     SPACING — base 4px
     -------------------------------------------------------------------- */
  --spacing-1:  4px;
  --spacing-2:  8px;
  --spacing-3:  12px;
  --spacing-4:  16px;
  --spacing-5:  20px;
  --spacing-6:  24px;
  --spacing-8:  32px;
  --spacing-10: 40px;
  --spacing-12: 48px;
  --spacing-16: 64px;
  --spacing-20: 80px;
  --spacing-24: 96px;
  --spacing-32: 128px;

  /* --------------------------------------------------------------------
     RADIUS
     -------------------------------------------------------------------- */
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   8px;
  --radius-xl:   12px;
  --radius-2xl:  16px;
  --radius-full: 9999px;

  /* --------------------------------------------------------------------
     SHADOWS — light-mode only. Em dark, ficam como none por design.
     Em dark, elevação se comunica por bg/elevated + border/subtle.
     -------------------------------------------------------------------- */
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
}

/* =====================================================================
   LIGHT MODE — overrides apenas o que muda
   ===================================================================== */
[data-theme="light"] {
  /* Background */
  --color-bg-primary:   var(--color-neutral-50);
  --color-bg-secondary: var(--color-neutral-100);
  --color-bg-elevated:  var(--color-neutral-0);
  --color-bg-inverse:   var(--color-neutral-900);

  /* Text */
  --color-text-primary: var(--color-neutral-900);
  --color-text-inverse: var(--color-neutral-0);
  /* secondary, tertiary, placeholder, on-action permanecem iguais */

  /* Border */
  --color-border-subtle:  var(--color-neutral-100);
  --color-border-default: var(--color-neutral-200);
  --color-border-active:  var(--color-neutral-300);
  /* focus permanece terracotta-500 */

  /* Action, accent, feedback — colors da marca não mudam com tema */

  /* Shadows — agora visíveis */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
}