/* =============================================================
   PR7 Design System — Tokens
   Referência dark: pr7.com.br (#151515 / #1F1F1F / #CBFC02 / #92A7AA)
   Fontes: Rubik (display), Barlow (corpo), Cairo (labels/eyebrows)

   Camadas:
   1. Primitivos e escalas (tema-agnósticos)
   2. Tokens semânticos por tema (dark padrão, light opt-in)
   3. Ponte Bootstrap/Tabler (--bs-*)
   4. Estilos base de elementos + utilitários
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700&family=Barlow:wght@400;500;600&family=Cairo:wght@600;700&display=swap');

/* ---------- 1. Primitivos e escalas ---------- */
:root {
    /* Marca */
    --pr7-lime:           #CBFC02;
    --pr7-lime-bright:    #DDFF3D;
    --pr7-lime-deep:      #B8E500;
    --pr7-olive:          #5F7800; /* lima legível sobre fundo claro */
    --pr7-olive-deep:     #4A5E00;
    --pr7-ink:            #151515;
    --pr7-sage:           #92A7AA;

    /* Tipografia */
    --pr7-font-display:   'Rubik', system-ui, sans-serif;
    --pr7-font-body:      'Barlow', system-ui, sans-serif;
    --pr7-font-label:     'Cairo', 'Barlow', sans-serif;
    --pr7-font-mono:      ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

    --pr7-text-xs:        .75rem;
    --pr7-text-sm:        .875rem;
    --pr7-text-base:      .9375rem;   /* 15px */
    --pr7-text-md:        1.0625rem;
    --pr7-text-lg:        1.25rem;
    --pr7-text-xl:        1.625rem;
    --pr7-text-2xl:       2.125rem;
    --pr7-text-3xl:       2.75rem;

    --pr7-tracking-tight: -0.02em;
    --pr7-tracking-label: 0.08em;

    /* Geometria */
    --pr7-radius-sm:      6px;
    --pr7-radius:         10px;
    --pr7-radius-lg:      14px;
    --pr7-radius-pill:    999px;

    /* Movimento */
    --pr7-ease:           cubic-bezier(.4, 0, .2, 1);
    --pr7-speed:          160ms;
    --pr7-speed-slow:     280ms;
}

/* ---------- 2. Tokens semânticos — DARK (padrão) ---------- */
:root,
[data-bs-theme="dark"] {
    color-scheme: dark;

    /* Superfícies (profundidade crescente) */
    --pr7-bg:             #151515;
    --pr7-bg-secondary:   #1B1B1B;
    --pr7-bg-card:        #1C1C1C;
    --pr7-bg-elevated:    #242424;
    --pr7-field-bg:       #101010;
    --pr7-code-bg:        #101010;

    /* Tinta */
    --pr7-text:           #F5F6F2;
    --pr7-text-secondary: #B9C4C6;
    --pr7-text-muted:     #92A7AA;

    /* Acento */
    --pr7-accent:         var(--pr7-lime);        /* texto, ícones, links */
    --pr7-accent-hover:   var(--pr7-lime-bright);
    --pr7-accent-solid:   var(--pr7-lime);        /* preenchimentos sólidos */
    --pr7-accent-solid-hover: var(--pr7-lime-bright);
    --pr7-accent-text:    var(--pr7-ink);          /* texto sobre acento sólido */

    /* Camadas translúcidas do acento (assinatura pr7.com.br) */
    --pr7-accent-a05:     rgba(203, 252, 2, .05);
    --pr7-accent-a10:     rgba(203, 252, 2, .10);
    --pr7-accent-a15:     rgba(203, 252, 2, .16);
    --pr7-accent-a25:     rgba(203, 252, 2, .28);

    /* Status */
    --pr7-green:          #49F992;
    --pr7-green-bg:       rgba(73, 249, 146, .12);
    --pr7-warning:        #FFCB3D;
    --pr7-warning-bg:     rgba(255, 203, 61, .12);
    --pr7-danger:         #FF7B7B;
    --pr7-danger-bg:      rgba(255, 123, 123, .12);
    --pr7-info:           #7CC6FF;
    --pr7-info-bg:        rgba(124, 198, 255, .12);

    /* Bordas */
    --pr7-border:         rgba(255, 255, 255, .08);
    --pr7-border-strong:  rgba(255, 255, 255, .17);
    --pr7-border-hover:   rgba(203, 252, 2, .35);

    /* Sombras: no escuro, elevação = borda + brilho discreto */
    --pr7-shadow-sm:      0 1px 2px rgba(0, 0, 0, .4);
    --pr7-shadow:         0 4px 16px rgba(0, 0, 0, .45);
    --pr7-shadow-lg:      0 16px 48px rgba(0, 0, 0, .55);
    --pr7-glow:           0 0 24px rgba(203, 252, 2, .07);

    --pr7-ring:           0 0 0 3px var(--pr7-accent-a25);
    --pr7-backdrop:       rgba(8, 9, 6, .7);
}

/* ---------- 2. Tokens semânticos — LIGHT ---------- */
[data-bs-theme="light"] {
    color-scheme: light;

    --pr7-bg:             #F5F6F3;
    --pr7-bg-secondary:   #FFFFFF;
    --pr7-bg-card:        #FFFFFF;
    --pr7-bg-elevated:    #FFFFFF;
    --pr7-field-bg:       #FFFFFF;
    --pr7-code-bg:        #131510; /* código continua escuro no tema claro */

    --pr7-text:           #1B1E16;
    --pr7-text-secondary: #464E44;
    --pr7-text-muted:     #5D6A60;

    --pr7-accent:         var(--pr7-olive);
    --pr7-accent-hover:   var(--pr7-olive-deep);
    --pr7-accent-solid:   var(--pr7-lime);         /* a marca segue lima */
    --pr7-accent-solid-hover: #BEEE00;
    --pr7-accent-text:    var(--pr7-ink);

    --pr7-accent-a05:     rgba(133, 168, 0, .06);
    --pr7-accent-a10:     rgba(133, 168, 0, .11);
    --pr7-accent-a15:     rgba(133, 168, 0, .16);
    --pr7-accent-a25:     rgba(133, 168, 0, .30);

    --pr7-green:          #1F8A4C;
    --pr7-green-bg:       rgba(31, 138, 76, .1);
    --pr7-warning:        #9A7000;
    --pr7-warning-bg:     rgba(154, 112, 0, .1);
    --pr7-danger:         #C6373C;
    --pr7-danger-bg:      rgba(198, 55, 60, .08);
    --pr7-info:           #1470AF;
    --pr7-info-bg:        rgba(20, 112, 175, .08);

    --pr7-border:         rgba(27, 30, 22, .1);
    --pr7-border-strong:  rgba(27, 30, 22, .18);
    --pr7-border-hover:   rgba(133, 168, 0, .45);

    /* Sombras em camadas suaves no claro */
    --pr7-shadow-sm:      0 1px 2px rgba(27, 30, 22, .06);
    --pr7-shadow:         0 2px 6px rgba(27, 30, 22, .05), 0 10px 28px rgba(27, 30, 22, .08);
    --pr7-shadow-lg:      0 4px 12px rgba(27, 30, 22, .07), 0 24px 56px rgba(27, 30, 22, .12);
    --pr7-glow:           none;

    --pr7-ring:           0 0 0 3px var(--pr7-accent-a25);
    --pr7-backdrop:       rgba(27, 30, 22, .45);
}

/* ---------- 3. Ponte Bootstrap / Tabler ---------- */
:root,
[data-bs-theme="dark"],
[data-bs-theme="light"] {
    --bs-body-bg:             var(--pr7-bg);
    --bs-body-color:          var(--pr7-text);
    --bs-body-font-family:    var(--pr7-font-body);
    --bs-secondary-bg:        var(--pr7-bg-secondary);
    --bs-tertiary-bg:         var(--pr7-bg-elevated);
    --bs-secondary-color:     var(--pr7-text-muted);
    --bs-emphasis-color:      var(--pr7-text);
    --bs-heading-color:       var(--pr7-text);
    --bs-border-color:        var(--pr7-border);
    --bs-border-radius:       var(--pr7-radius-sm);
    --bs-border-radius-lg:    var(--pr7-radius);
    --bs-card-bg:             var(--pr7-bg-card);
    --bs-primary:             var(--pr7-accent);
    --bs-link-color:          var(--pr7-accent);
    --bs-link-hover-color:    var(--pr7-accent-hover);
    --bs-navbar-color:        var(--pr7-text-muted);
    --bs-navbar-active-color: var(--pr7-accent);
    --bs-dropdown-bg:         var(--pr7-bg-elevated);
    --bs-modal-bg:            var(--pr7-bg-elevated);
    --bs-offcanvas-bg:        var(--pr7-bg-secondary);

    /* Tabler (admin) */
    --tblr-body-bg:               var(--pr7-bg);
    --tblr-body-color:            var(--pr7-text);
    --tblr-font-sans-serif:       var(--pr7-font-body);
    --tblr-bg-surface:            var(--pr7-bg-card);
    --tblr-bg-surface-secondary:  var(--pr7-bg-secondary);
    --tblr-bg-surface-tertiary:   var(--pr7-bg-elevated);
    --tblr-border-color:          var(--pr7-border);
    --tblr-border-color-translucent: var(--pr7-border);
    --tblr-primary:               var(--pr7-accent);
    --tblr-link-color:            var(--pr7-accent);
    --tblr-link-hover-color:      var(--pr7-accent-hover);
    --tblr-secondary:             var(--pr7-text-muted);
    --tblr-secondary-color:       var(--pr7-text-muted);
    --tblr-muted:                 var(--pr7-text-muted);
    --tblr-card-bg:               var(--pr7-bg-card);
    --tblr-dropdown-bg:           var(--pr7-bg-elevated);
    --tblr-modal-bg:              var(--pr7-bg-elevated);
}

:root,
[data-bs-theme="dark"] {
    --bs-primary-rgb: 203, 252, 2;
    --tblr-primary-rgb: 203, 252, 2;
}

[data-bs-theme="light"] {
    --bs-primary-rgb: 133, 168, 0;
    --tblr-primary-rgb: 133, 168, 0;
}

/* ---------- 4. Base ---------- */
* {
    box-sizing: border-box;
}

html {
    transition: none;
}

body {
    font-family: var(--pr7-font-body);
    font-size: var(--pr7-text-base);
    line-height: 1.6;
    background-color: var(--pr7-bg);
    color: var(--pr7-text);
    min-height: 100vh;
    margin: 0;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--pr7-font-display);
    font-weight: 600;
    letter-spacing: var(--pr7-tracking-tight);
    color: var(--pr7-text);
}

.form-label,
.badge,
.nav-link,
.btn {
    font-family: var(--pr7-font-label);
}

small, .small {
    font-family: var(--pr7-font-body);
}

a {
    color: var(--pr7-accent);
    text-decoration: none;
    transition: color var(--pr7-speed) var(--pr7-ease);
}

a:hover {
    color: var(--pr7-accent-hover);
}

.text-muted {
    color: var(--pr7-text-muted) !important;
}

.text-secondary {
    color: var(--pr7-text-secondary) !important;
}

::selection {
    background: var(--pr7-accent-a25);
    color: var(--pr7-text);
}

code {
    font-family: var(--pr7-font-mono);
    color: var(--pr7-accent);
    background: var(--pr7-accent-a10);
    padding: .12em .4em;
    border-radius: 4px;
    font-size: .84em;
}

hr {
    border-color: var(--pr7-border);
    opacity: 1;
}

/* Eyebrow: label uppercase da marca (assinatura pr7.com.br) */
.pr7-eyebrow {
    display: inline-block;
    font-family: var(--pr7-font-label);
    font-size: var(--pr7-text-xs);
    font-weight: 700;
    letter-spacing: var(--pr7-tracking-label);
    text-transform: uppercase;
    color: var(--pr7-accent);
    margin-bottom: .5rem;
}

.accent {
    color: var(--pr7-accent);
}

/* Foco visível único para todo o sistema */
:focus-visible {
    outline: 2px solid var(--pr7-accent);
    outline-offset: 2px;
    border-radius: 2px;
}

.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.nav-link:focus-visible {
    outline: 2px solid var(--pr7-accent);
    outline-offset: 2px;
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--pr7-border-strong);
    border-radius: var(--pr7-radius-pill);
}
::-webkit-scrollbar-thumb:hover {
    background: var(--pr7-border-hover);
}

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