/* ============================================================
   OPTMA DESIGN SYSTEM · TURBINA LIGHT
   Tokens CSS · v0.1 · fonte única de variáveis
   ============================================================
   Importar primeiro em qualquer projeto que use o sistema.
   Convivem com Tailwind via tokens.tailwind.ts (preset).
============================================================ */

:root {
  /* -----------------------------------------
     COR · base / paper
     ----------------------------------------- */
  --opt-paper:        #FAFAF6;
  --opt-paper-soft:   #F2F1EA;
  --opt-paper-warm:   #FFF7EE;

  /* -----------------------------------------
     COR · tinta / texto
     ----------------------------------------- */
  --opt-ink:          #0A100C;
  --opt-ink-mid:      #2A2E29;
  --opt-ink-muted:    #6A6F68;

  /* -----------------------------------------
     COR · divisores e bordas
     ----------------------------------------- */
  --opt-rule:         #E2E1D6;
  --opt-rule-soft:    #ECEBE0;

  /* -----------------------------------------
     COR · marca (verde Optma em 3 tons)
     ----------------------------------------- */
  --opt-green-deep:   #0F3A18;
  --opt-green:        #34963b;   /* Optma oficial */
  --opt-green-bright: #5DE26F;

  /* -----------------------------------------
     COR · calor (laranja, uso funcional)
     Reservado para: status "atenção/aguardando",
     warnings, palavras-chave pontuais em copy.
     Nunca decorativo.
     ----------------------------------------- */
  --opt-orange:        #FF7A2C;
  --opt-orange-bright: #FFB377;

  /* -----------------------------------------
     COR · semântica
     ----------------------------------------- */
  --opt-success:      var(--opt-green);
  --opt-warning:      var(--opt-orange);
  --opt-error:        #E64545;
  --opt-error-soft:   #FDECEC;
  --opt-info:         #2E6FE3;
  --opt-info-soft:    #E8EFFB;

  /* -----------------------------------------
     TIPOGRAFIA · famílias
     ----------------------------------------- */
  --opt-font-display: 'Montserrat', system-ui, -apple-system, sans-serif;
  --opt-font-body:    'Poppins', system-ui, -apple-system, sans-serif;

  /* -----------------------------------------
     TIPOGRAFIA · escala (rem-friendly)
     Usar como font-size direto. 1rem = 16px.
     ----------------------------------------- */
  --opt-text-2xs:   0.625rem;   /* 10px */
  --opt-text-xs:    0.6875rem;  /* 11px */
  --opt-text-sm:    0.75rem;    /* 12px */
  --opt-text-base:  0.8125rem;  /* 13px */
  --opt-text-md:    0.875rem;   /* 14px */
  --opt-text-lg:    1rem;       /* 16px */
  --opt-text-xl:    1.125rem;   /* 18px */
  --opt-text-2xl:   1.25rem;    /* 20px */
  --opt-text-3xl:   1.5rem;     /* 24px */
  --opt-text-4xl:   2rem;       /* 32px */
  --opt-text-5xl:   2.5rem;     /* 40px */
  --opt-text-6xl:   3rem;       /* 48px */
  --opt-text-7xl:   4rem;       /* 64px */
  --opt-text-8xl:   5rem;       /* 80px */
  --opt-text-9xl:   6rem;       /* 96px */
  --opt-text-mega:  7.5rem;     /* 120px, hero */
  --opt-text-giga:  10rem;      /* 160px, hero dramático */

  /* -----------------------------------------
     TIPOGRAFIA · pesos
     ----------------------------------------- */
  --opt-weight-regular:  400;
  --opt-weight-medium:   500;
  --opt-weight-semibold: 600;
  --opt-weight-bold:     700;
  --opt-weight-extrabold:800;
  --opt-weight-black:    900;

  /* -----------------------------------------
     TIPOGRAFIA · line-heights
     ----------------------------------------- */
  --opt-leading-tight:   1.05;  /* títulos grandes */
  --opt-leading-snug:    1.15;  /* títulos médios */
  --opt-leading-normal:  1.5;   /* corpo */
  --opt-leading-relaxed: 1.6;   /* leitura longa */

  /* -----------------------------------------
     TIPOGRAFIA · letter-spacing
     ----------------------------------------- */
  --opt-tracking-tighter: -0.03em;  /* H1 mega */
  --opt-tracking-tight:   -0.015em; /* H2-H3 */
  --opt-tracking-normal:  0;
  --opt-tracking-wide:    0.05em;
  --opt-tracking-wider:   0.12em;   /* labels uppercase */
  --opt-tracking-widest:  0.18em;   /* eyebrows */

  /* -----------------------------------------
     ESPAÇAMENTO · escala 4px
     ----------------------------------------- */
  --opt-space-0:   0;
  --opt-space-1:   0.25rem;   /* 4px */
  --opt-space-2:   0.5rem;    /* 8px */
  --opt-space-3:   0.75rem;   /* 12px */
  --opt-space-4:   1rem;      /* 16px */
  --opt-space-5:   1.25rem;   /* 20px */
  --opt-space-6:   1.5rem;    /* 24px */
  --opt-space-7:   1.75rem;   /* 28px */
  --opt-space-8:   2rem;      /* 32px */
  --opt-space-10:  2.5rem;    /* 40px */
  --opt-space-12:  3rem;      /* 48px */
  --opt-space-14:  3.5rem;    /* 56px */
  --opt-space-16:  4rem;      /* 64px */
  --opt-space-20:  5rem;      /* 80px */
  --opt-space-24:  6rem;      /* 96px */
  --opt-space-32:  8rem;      /* 128px */

  /* -----------------------------------------
     RAIO de borda
     ----------------------------------------- */
  --opt-radius-none: 0;
  --opt-radius-xs:   4px;
  --opt-radius-sm:   6px;
  --opt-radius-md:   10px;   /* botões */
  --opt-radius-lg:   14px;   /* inputs, blocos internos */
  --opt-radius-xl:   18px;
  --opt-radius-2xl:  22px;   /* cards */
  --opt-radius-3xl:  28px;
  --opt-radius-full: 9999px; /* pills */

  /* -----------------------------------------
     SOMBRAS · estrutural + glow em light
     ----------------------------------------- */
  --opt-shadow-soft:        0 4px 20px rgba(10, 16, 12, 0.06);
  --opt-shadow-soft-lg:     0 12px 40px rgba(10, 16, 12, 0.08);
  --opt-shadow-green:       0 12px 40px rgba(52, 150, 59, 0.18);
  --opt-shadow-green-strong:0 16px 50px rgba(52, 150, 59, 0.28);
  --opt-shadow-hover:       0 16px 50px rgba(52, 150, 59, 0.22);
  --opt-shadow-orange:      0 12px 40px rgba(255, 122, 44, 0.16);

  /* Rings (focus, ativo) */
  --opt-ring-green:  0 0 0 4px rgba(52, 150, 59, 0.18);
  --opt-ring-orange: 0 0 0 4px rgba(255, 122, 44, 0.18);
  --opt-ring-error:  0 0 0 4px rgba(230, 69, 69, 0.18);
  --opt-ring-info:   0 0 0 4px rgba(46, 111, 227, 0.18);

  /* -----------------------------------------
     MOTION · durations + easings
     ----------------------------------------- */
  --opt-duration-fast:  150ms;
  --opt-duration-base:  220ms;
  --opt-duration-slow:  320ms;
  --opt-duration-lazy:  480ms;

  --opt-ease-out:     cubic-bezier(0.2, 0.8, 0.2, 1);   /* default */
  --opt-ease-in:      cubic-bezier(0.4, 0, 1, 1);
  --opt-ease-in-out:  cubic-bezier(0.4, 0, 0.2, 1);
  --opt-ease-snap:    cubic-bezier(0.34, 1.56, 0.64, 1); /* spring-ish */

  /* -----------------------------------------
     Z-INDEX
     ----------------------------------------- */
  --opt-z-base:      1;
  --opt-z-dropdown:  100;
  --opt-z-sticky:    200;
  --opt-z-overlay:   500;
  --opt-z-modal:     1000;
  --opt-z-toast:     1500;
  --opt-z-tooltip:   2000;
}

/* ============================================================
   RESET / BASE TIPOGRÁFICA
   Aplicar onde fizer sentido (não obrigatório).
============================================================ */

.opt-reset, .opt-reset *, .opt-reset *::before, .opt-reset *::after {
  box-sizing: border-box;
}

.opt-base {
  background: var(--opt-paper);
  color: var(--opt-ink);
  font-family: var(--opt-font-body);
  font-size: var(--opt-text-lg);
  line-height: var(--opt-leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================================
   UTILS · usar quando não houver Tailwind ainda
============================================================ */

.opt-display { font-family: var(--opt-font-display); }
.opt-body    { font-family: var(--opt-font-body); }

.opt-eyebrow {
  font-family: var(--opt-font-body);
  font-size: var(--opt-text-sm);
  font-weight: var(--opt-weight-medium);
  letter-spacing: var(--opt-tracking-widest);
  text-transform: uppercase;
  color: var(--opt-ink-muted);
}