/* ============================================================
   SMAIS Design Tokens
   Ordem de cascata: brand → tema → componente
   Nunca use valores hardcoded de cor fora deste arquivo.
   ============================================================ */

/* ── 0. Web Fonts (self-hosted) ──────────────────────────── */

/* TT Commons Pro Trial — variable font (300–900, todas as larguras) */
@font-face {
    font-family: 'TT Commons Pro Trial';
    src: url('/src/assets/fonts/TT Commons Pro Trial Variable.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* Playfair Display — variable font (upright) */
@font-face {
    font-family: 'Playfair Display';
    src: url('/src/assets/fonts/PlayfairDisplay-VariableFont_wght.ttf') format('truetype');
    font-weight: 400 900;
    font-style: normal;
    font-display: swap;
}

/* Playfair Display — variable font (italic) */
@font-face {
    font-family: 'Playfair Display';
    src: url('/src/assets/fonts/PlayfairDisplay-Italic-VariableFont_wght.ttf') format('truetype');
    font-weight: 400 900;
    font-style: italic;
    font-display: swap;
}

/* Beautifuly Delicious Sans — Regular */
@font-face {
    font-family: 'Beautifuly Delicious';
    src: url('/src/assets/fonts/BDSans-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Beautifuly Delicious Sans — Bold */
@font-face {
    font-family: 'Beautifuly Delicious';
    src: url('/src/assets/fonts/BDSans-Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* relationship_of_melodrame — display/decorativa */
@font-face {
    font-family: 'relationship_of_melodrame';
    src: url('/src/assets/fonts/relationship_of_melodrame.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* ── 1. Brand (imutáveis) ─────────────────────────────────── */
:root {
    /* Verdes */
    --brand-green-deep:  #011e06;
    --brand-green:       #013109;
    --brand-green-mid:   #003109;

    /* Bordô */
    --brand-red:         #650005;
    --brand-red-deep:    #2d0103;

    /* Dourado / superfícies quentes */
    --brand-gold:        #dfc797;
    --brand-gold-muted:  rgba(223, 199, 151, 0.35);
    --brand-cream:       #fefcf6;
    --brand-warm-white:  #e8e4e2;
    --brand-off-white:   #f8f8f8;
    --brand-charcoal:    #353535;

    /* Sidebar — sempre escura, independe do tema */
    --sidebar-brand-bg:      var(--brand-green-deep);
    --sidebar-brand-text:    rgba(255, 255, 255, 0.65);
    --sidebar-brand-active:  rgba(255, 255, 255, 0.12);
    --sidebar-brand-hover:   rgba(255, 255, 255, 0.07);
    --sidebar-brand-border:  rgba(255, 255, 255, 0.07);

    /* Semântica de feedback — distintas das cores de marca */
    --color-success:     #15803d;
    --color-success-bg:  #dcfce7;
    --color-success-border: #bbf7d0;
    --color-success-text:   #166534;

    --color-error:       #dc2626;
    --color-error-bg:    #fef2f2;
    --color-error-border: #fecaca;
    --color-error-text:  #991b1b;

    --color-warning:     #b45309;
    --color-warning-bg:  #fef9c3;
    --color-warning-border: #fde68a;
    --color-warning-text:   #854d0e;

    --color-info:        #0369a1;
    --color-info-bg:     #e0f2fe;
    --color-info-border: #bae6fd;
    --color-info-text:   #075985;

    /* Tipografia */
    --font-display: 'relationship_of_melodrame', 'Beautifuly Delicious', serif;
    --font-serif:   'Playfair Display', Georgia, serif;
    --font-ui:      'TT Commons Pro Trial', 'Inter', system-ui, -apple-system, sans-serif;

    --font-size-xs:   0.75rem;
    --font-size-sm:   0.8125rem;
    --font-size-base: 0.9375rem;
    --font-size-md:   1rem;
    --font-size-lg:   1.15rem;
    --font-size-xl:   1.4rem;
    --font-size-2xl:  1.75rem;
    --font-size-hero: 2.5rem;

    /* Espaçamento */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-8:  32px;
    --space-10: 40px;

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

    /* Sombras */
    --shadow-sm:  0 1px 3px rgba(0,0,0,.08);
    --shadow-md:  0 4px 12px rgba(0,0,0,.10);
    --shadow-lg:  0 8px 24px rgba(0,0,0,.12);
    --shadow-xl:  0 20px 48px rgba(0,0,0,.18);

    /* Transições */
    --transition-fast:   0.12s ease;
    --transition-normal: 0.18s ease;
    --transition-slow:   0.3s ease;

    /* Layout */
    --sidebar-w:           220px;
    --sidebar-collapsed-w: 56px;
    --topbar-h:            56px;
}

/* ── 2. Light Mode ─────────────────────────────────────────── */
[data-theme="light"] {
    --color-bg:           var(--brand-cream);
    --color-bg-internal:  var(--brand-off-white);
    --color-surface:      #ffffff;
    --color-surface-2:    var(--brand-off-white);
    --color-surface-3:    var(--brand-warm-white);
    --color-border:       var(--brand-warm-white);
    --color-border-strong: #d0cbc7;
    --color-text:         var(--brand-charcoal);
    --color-text-muted:   #6b7280;
    --color-text-light:   #9ca3af;
    --color-text-heading: var(--brand-green-deep);

    --color-primary:        var(--brand-green);
    --color-primary-hover:  var(--brand-green-mid);
    --color-primary-text:   #ffffff;
    --color-primary-subtle: rgba(1, 49, 9, 0.08);

    --color-accent:         var(--brand-red);
    --color-accent-hover:   var(--brand-red-deep);
    --color-accent-subtle:  rgba(101, 0, 5, 0.08);

    --color-gold-accent:    var(--brand-gold);
    --color-gold-subtle:    rgba(223, 199, 151, 0.20);

    /* Overlay de modais */
    --color-overlay: rgba(1, 30, 6, 0.45);

    /* Inputs */
    --input-bg:     #ffffff;
    --input-border: var(--brand-warm-white);
    --input-focus:  var(--brand-green);

    /* Topbar */
    --color-topbar-bg: var(--color-surface);

    /* Scrollbar */
    --scrollbar-track: var(--brand-off-white);
    --scrollbar-thumb: #c8c3be;
}

/* ── 3. Dark Mode ──────────────────────────────────────────── */
[data-theme="dark"] {
    --color-bg:           #171f18;
    --color-bg-internal:  #171d17;
    --color-surface:      #1d2820;
    --color-surface-2:    #222e24;
    --color-surface-3:    #283429;

    --color-topbar-bg:    #0a0f0b;
    --color-border:       rgba(255, 255, 255, 0.10);
    --color-border-strong: rgba(255, 255, 255, 0.20);
    --color-text:         var(--brand-cream);
    --color-text-muted:   #8daa92;
    --color-text-light:   #5a7a5e;
    --color-text-heading: var(--brand-cream);

    --color-primary:        #4a9e65;
    --color-primary-hover:  #3d8b55;
    --color-primary-text:   #ffffff;
    --color-primary-subtle: rgba(74, 158, 101, 0.18);

    --color-accent:         #b04a50;
    --color-accent-hover:   #9a3d42;
    --color-accent-subtle:  rgba(176, 74, 80, 0.20);

    --color-gold-accent:    var(--brand-gold);
    --color-gold-subtle:    rgba(223, 199, 151, 0.12);

    --color-overlay: rgba(0, 0, 0, 0.65);

    --input-bg:     #1a2e1d;
    --input-border: rgba(255, 255, 255, 0.13);
    --input-focus:  #4a9e65;

    --scrollbar-track: #0d2b12;
    --scrollbar-thumb: #2a4a2e;

    /* Sidebar — harmoniza com o bg cinza-esverdeado */
    --sidebar-brand-bg:     #080e0a;
    --sidebar-brand-text:   rgba(223, 199, 151, 0.72);
    --sidebar-brand-active: rgba(223, 199, 151, 0.13);
    --sidebar-brand-hover:  rgba(223, 199, 151, 0.07);
    --sidebar-brand-border: rgba(223, 199, 151, 0.09);
}

/* ── 4. Diferenciação de área ──────────────────────────────── */
/* Área interna usa off-white neutro; cliente usa creme quente  */
[data-theme="light"] body.area-internal {
    --color-bg: var(--brand-off-white);
}
[data-theme="dark"] body.area-internal {
    --color-bg: var(--color-bg-internal);
}

/* ── 5. Classes utilitárias de tipografia ─────────────────── */

/* Título hero — fonte display decorativa (onboarding, welcome sections) */
.hero-title {
    font-family: var(--font-display);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: 0.01em;
}

/* Título de seção premium — Playfair Display (área cliente) */
.section-title {
    font-family: var(--font-serif);
    font-weight: 600;
    line-height: 1.3;
}

/* Sobrenome/nome destacado em contexto display */
.display-name {
    font-family: var(--font-display);
    font-weight: 400;
}

/* ── 6. Scrollbar customizada ─────────────────────────────── */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}
::-webkit-scrollbar       { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--scrollbar-track); }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 3px; }