/* =============================================================================
 * Fractur — tenant theme
 *
 * Fonte da verdade: Fractur Brand Guidelines, Edition 01
 * (resumo em Utils/docs/fractur/design-system.md). Princípio da marca:
 * "Institutional Restraint" — preto e branco, sem cor de acento, hairlines em
 * vez de caixas, hierarquia por opacidade. Ênfase vem de subir o texto na
 * escada de opacidade ou de inverter uma superfície inteira.
 *
 * O modo padrão é o escuro (env.js: priority 'dark'). O modo claro é o tom
 * inverso oficial da marca: preto sobre #FAF9F5.
 *
 * ESPECIFICIDADE — este arquivo é carregado ANTES do bundle do Angular, então
 * empate de especificidade perde por ordem. Por isso os seletores abaixo são
 * um degrau mais específicos que os do styles.scss:
 *   html:root                     (0,1,1) > :root                 (0,1,0)
 *   :root body:not(.dark-theme)   (0,2,1) > body:not(.dark-theme) (0,1,1)
 *   :root body.dark-theme         (0,2,1) > :root .dark-theme     (0,2,0)
 * Não "simplifique" para :root / body.dark-theme: o tema deixa de aplicar.
 * ============================================================================= */


/* -----------------------------------------------------------------------------
 * 1. TIPOGRAFIA
 *
 * Aeonik é a fonte da marca (licenciada; binários ainda não entregues).
 * Manrope é a substituta oficial definida no próprio guia até lá. Para trocar:
 * colocar os arquivos da Aeonik em fonts/ e declarar o @font-face 'Aeonik'.
 *
 * O range de peso 300–500 é deliberado: a marca usa só Light, Regular e
 * Medium ("no bold — strong resolves to medium"). Com a face declarada até
 * 500, qualquer font-weight 600/700 dos componentes cai em 500 sem precisar
 * editar componente por componente. font-synthesis: none impede o browser de
 * fabricar um negrito falso por cima.
 * ----------------------------------------------------------------------------- */
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-display: swap;
    font-weight: 300 500;
    src: url('fonts/manrope-latin-ext.woff2') format('woff2-variations');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-display: swap;
    font-weight: 300 500;
    src: url('fonts/manrope-latin.woff2') format('woff2-variations');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

html {
    font-synthesis: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Display sempre em peso regular com tracking negativo — "o traço tipográfico
 * mais identificável da marca". */
h1, h2 { font-weight: 400; letter-spacing: -0.04em; }
h3     { font-weight: 400; letter-spacing: -0.02em; }
b, strong { font-weight: 500; }


/* -----------------------------------------------------------------------------
 * 2. TOKENS GLOBAIS + MODO CLARO (tom inverso: preto sobre #FAF9F5)
 * ----------------------------------------------------------------------------- */
html:root {
    /* Marca. "Four Inks. No Accent." — a cor primária é a própria tinta:
     * preta no modo claro, branca no escuro (redefinida no bloco dark). */
    --brand-primary:          #000000;
    --brand-primary-bright:   #373838;
    --brand-primary-deep:     #000000;
    --brand-on-primary:       #FFFFFF;
    --brand-primary-rgb:      0, 0, 0;

    /* Secundária = a própria tinta. A marca não tem segunda cor; o app usa
     * gradientes primária→secundária em botões e cabeçalhos, e com as duas
     * iguais eles viram superfície chapada, como o guia pede. */
    --brand-secondary:        #000000;
    --brand-secondary-bright: #000000;
    --brand-secondary-deep:   #000000;
    --brand-on-secondary:     #FFFFFF;
    --brand-secondary-rgb:    0, 0, 0;

    --brand-font-display: 'Aeonik', 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --brand-font-body:    'Aeonik', 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --brand-font-mono:    'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;

    /* Retrocompat — ver bloco dark: precisa ser redeclarado lá também. */
    --custom-color-primary:                       var(--brand-primary);
    --custom-color-secondary:                     var(--brand-secondary);
    --custom-color-primary-rgb:                   var(--brand-primary-rgb);
    --custom-color-secondary-rgb:                 var(--brand-secondary-rgb);
    --custom-color-gradient-left-header:          var(--brand-primary);
    --custom-color-gradient-right-header:         var(--brand-primary);
    --custom-color-gradient-left-footer-rights:   var(--brand-primary);
    --custom-color-gradient-right-footer-rights:  var(--brand-primary);

    /* Raios da marca: 5 botões · 10 cards · 20 pills · 100 cápsula de nav */
    --bank-radius-sm:  5px;
    --bank-radius-md:  10px;
    --bank-radius-lg:  10px;
    --bank-radius-xl:  10px;
    --bank-radius-2xl: 20px;
    --shell-sidebar-item-radius: 5px;

    /* Semânticas de valor — PROVISÓRIO. A marca não define cor de estado.
     * Mantidas só onde a função exige (erro, entrada/saída, pendente), em tons
     * dessaturados. Brand team deve validar. */
    --bank-income-rgb:  63, 122, 90;
    --bank-expense-rgb: 164, 71, 61;
    --bank-pending-rgb: 134, 105, 46;
    --bank-info-rgb:    0, 0, 0;

    /* Efeitos do shell "Revolut + Stripe" que a marca proíbe: gradiente,
     * glow e ambiência colorida. Neutralizados. */
    --accent-trade:        currentColor;
    --accent-banking:      currentColor;
    --accent-tokens:       currentColor;
    --accent-marketplace:  currentColor;
    --accent-investments:  currentColor;
    --gradient-brand:      var(--brand-primary);
    --ambient-glow-soft:   none;
    --shadow-brand:        0 0 0 0 transparent;

    /* Superfícies e texto — modo claro */
    --bg-main:             #FAF9F5;
    --bg-secondary:        #FFFFFF;
    --bg-highlight:        #000000;
    --color-highlight:     #000000;
    --color-main:          #000000;
    --color-secondary:     rgba(0, 0, 0, 0.60);
    --color-common:        rgba(0, 0, 0, 0.56);   /* 50% dava 3.95:1 no branco: reprovava AA */
    --color-stroke:        rgba(0, 0, 0, 0.16);
    --dividing-line-color: rgba(0, 0, 0, 0.08);
    --color-text-in-theme-disabled: rgba(0, 0, 0, 0.30);
    color: #000000;
}

/* Tokens resolvidos no <body> em modo claro (o bundle declara vários
 * direto no body, então não basta herdar do html). */
:root body:not(.dark-theme) {
    --color-utility: rgba(0, 0, 0, 0.08);
    --brand-primary:        #000000;
    --brand-on-primary:     #FFFFFF;
    --brand-primary-rgb:    0, 0, 0;

    --color-search-background:       #FFFFFF;
    --color-background-white:        #FFFFFF;
    --color-input-background-modal:  #FAF9F5;
    --color-text-in-themes:          #000000;
    --color-input-background:        #FFFFFF;
    --color-background-home-card:    #FFFFFF;
    --history-background:            #FFFFFF;
    --color-background:              #FFFFFF;
    --color-background-modal:        #FFFFFF;
    --color-modal-title:             #000000;
    --services-background:           #FFFFFF;
    --transaction-card-background:   #FFFFFF;
    --exchange-card-background:      #FFFFFF;
    --color-background-internal:     #FAF9F5;
    --color-exchange-line-inverted:  #FAF9F5;
    --categories-background:         #FFFFFF;
    --card-background:               #FFFFFF;
    --background-gradient:           #FAF9F5;
    --background-theme-main:         #FAF9F5;
    --background-theme-component:    #FFFFFF;
    --text-theme-main:               #000000;
    --text-theme-secondary:          rgba(0, 0, 0, 0.60);
    --internal-card-background:      #FFFFFF;

    --exchange-primary:        #000000;
    --exchange-primary-hover:  #373838;
    --exchange-primary-bg:     rgba(0, 0, 0, 0.05);
    --exchange-primary-border: rgba(0, 0, 0, 0.24);
    --exchange-success:        #3F7A5A;
    --exchange-success-hover:  #3F7A5A;
    --exchange-success-bg:     rgba(63, 122, 90, 0.10);
    --exchange-success-border: rgba(63, 122, 90, 0.30);
    --exchange-success-text:   #3F7A5A;
    --exchange-danger:         #A4473D;
    --exchange-danger-hover:   #A4473D;
    --exchange-danger-bg:      rgba(164, 71, 61, 0.10);
    --exchange-danger-border:  rgba(164, 71, 61, 0.30);
    --exchange-danger-text:    #A4473D;
    --exchange-warning:        #86692E;
    --exchange-warning-bg:     rgba(134, 105, 46, 0.10);

    --bank-surface-sunken:   #FAF9F5;
    --bank-surface-hover:    rgba(0, 0, 0, 0.03);
    --bank-expense-soft:     #A4473D;
    --bank-accent-soft:      rgba(0, 0, 0, 0.06);
    --bank-accent-hover:     rgba(0, 0, 0, 0.03);
    --bank-accent-border:    rgba(0, 0, 0, 0.24);
    --bank-accent-pressed:   #373838;
    --bank-focus-ring:       0 0 0 1px #000000;
    --bank-shadow-sm:        0 0 0 0 transparent;
    --bank-shadow-md:        0 0 0 0 transparent;
    --bank-shadow-lg:        0 0 0 0 transparent;
    --bank-shadow-card:      0 0 0 0 transparent;

    --ui-chip-active-bg:     #000000;
    --ui-chip-active-fg:     #FFFFFF;
    --ui-chip-active-glow:   transparent;
    --shadow-soft:           0 0 0 0 transparent;
    --shadow-medium:         0 0 0 0 transparent;
    --shadow-elevated:       0 0 0 0 transparent;

    --shell-sidebar-bg:            #FAF9F5;
    --shell-sidebar-text:          rgba(0, 0, 0, 0.68);
    --shell-sidebar-text-muted:    rgba(0, 0, 0, 0.56);
    --shell-sidebar-section-label: rgba(0, 0, 0, 0.56);
    --shell-sidebar-divider:       rgba(0, 0, 0, 0.08);
    --shell-sidebar-hover-bg:      rgba(0, 0, 0, 0.03);
    --shell-sidebar-active-bg:     rgba(0, 0, 0, 0.06);
    --shell-sidebar-active-text:   #000000;
    --shell-sidebar-active-indicator: #000000;
    --shell-topbar-bg:             #FAF9F5;
    --shell-topbar-border:         rgba(0, 0, 0, 0.08);
    --shell-topbar-text:           #000000;
    --shell-topbar-text-muted:     rgba(0, 0, 0, 0.56);
    --shell-topbar-icon:           #000000;
    --shell-topbar-hover-bg:       rgba(0, 0, 0, 0.03);
    --shell-content-bg:            #FAF9F5;
}


/* -----------------------------------------------------------------------------
 * 3. MODO ESCURO (padrão da Fractur)
 *
 * Superfícies: "Four Near-Blacks and a Wash" — página #000, seção #050505,
 * card #0a0a0a, card hover #141414; lavagens brancas de 2/4/6/8%.
 * Texto: "Hierarchy Is Opacity" — 100% títulos · 86% sobre imagem ·
 * 68% corpo · 60% eyebrows · 48% meta/labels · 40% linha legal.
 * (o degrau de meta subiu de 45% para 48%: 45% sobre o card #0A0A0A dava 4.48:1.)
 * ----------------------------------------------------------------------------- */
:root body.dark-theme {
    --color-utility: rgba(255, 255, 255, 0.08);
    color-scheme: dark;
    color: #FFFFFF;

    --brand-primary:          #FFFFFF;
    --brand-primary-bright:   #FFFFFF;
    --brand-primary-deep:     #E6E6E6;
    --brand-on-primary:       #000000;
    --brand-primary-rgb:      255, 255, 255;

    --brand-secondary:        #FFFFFF;
    --brand-secondary-bright: #FFFFFF;
    --brand-secondary-deep:   #E6E6E6;
    --brand-on-secondary:     #000000;
    --brand-secondary-rgb:    255, 255, 255;

    /* Aliases resolvidos no html herdariam o preto do modo claro. */
    --custom-color-primary:                       var(--brand-primary);
    --custom-color-primary-rgb:                   var(--brand-primary-rgb);
    --custom-color-secondary:                     var(--brand-secondary);
    --custom-color-secondary-rgb:                 var(--brand-secondary-rgb);
    --custom-color-gradient-left-header:          var(--brand-primary);
    --custom-color-gradient-right-header:         var(--brand-primary);
    --custom-color-gradient-left-footer-rights:   var(--brand-primary);
    --custom-color-gradient-right-footer-rights:  var(--brand-primary);
    --gradient-brand:        var(--brand-primary);
    --bank-info-rgb:         255, 255, 255;
    --bank-income-rgb:       143, 191, 163;
    --bank-expense-rgb:      224, 150, 140;
    --bank-pending-rgb:      210, 183, 127;

    /* Superfícies */
    --bg-main:                       #000000;
    --bg-secondary:                  #0A0A0A;
    --bg-highlight:                  #FFFFFF;
    --color-highlight:               #FFFFFF;
    --background-theme-main:         #000000;
    --background-theme-component:    #0A0A0A;
    --color-search-background:       #0A0A0A;
    --color-background-white:        #0A0A0A;
    --color-input-background-modal:  #141414;
    --color-input-background:        #0A0A0A;
    --color-background-home-card:    #0A0A0A;
    --color-background:              #0A0A0A;
    --color-background-modal:        #050505;
    --color-background-internal:     #000000;
    --services-background:           #0A0A0A;
    --transaction-card-background:   #0A0A0A;
    --exchange-card-background:      #0A0A0A;
    --internal-card-background:      #0A0A0A;
    --color-exchange-line-inverted:  #050505;
    --categories-background:         #0A0A0A;
    --card-background:               #0A0A0A;
    --background-gradient:           #000000;
    --history-background:            #000000;

    /* Texto */
    --color-main:                    #FFFFFF;
    --color-secondary:               rgba(255, 255, 255, 0.68);
    --color-common:                  rgba(255, 255, 255, 0.48);   /* 45% dava 4.48:1 no card #0A0A0A */
    --color-text-in-themes:          #FFFFFF;
    --color-modal-title:             #FFFFFF;
    --text-theme-main:               #FFFFFF;
    --text-theme-secondary:          rgba(255, 255, 255, 0.68);
    --color-text-in-theme-disabled:  rgba(255, 255, 255, 0.30);

    /* Linhas: hairlines, nunca caixas */
    --color-stroke:                  rgba(255, 255, 255, 0.16);
    --dividing-line-color:           rgba(255, 255, 255, 0.10);

    /* Camada exchange/bank — cor de marca vira tinta branca */
    --exchange-primary:        #FFFFFF;
    --exchange-primary-hover:  rgba(255, 255, 255, 0.86);
    --exchange-primary-bg:     rgba(255, 255, 255, 0.08);
    --exchange-primary-border: rgba(255, 255, 255, 0.24);
    --exchange-success:        #8FBFA3;
    --exchange-success-hover:  #8FBFA3;
    --exchange-success-bg:     rgba(143, 191, 163, 0.10);
    --exchange-success-border: rgba(143, 191, 163, 0.30);
    --exchange-success-text:   #8FBFA3;
    --exchange-danger:         #E0968C;
    --exchange-danger-hover:   #E0968C;
    --exchange-danger-bg:      rgba(224, 150, 140, 0.10);
    --exchange-danger-border:  rgba(224, 150, 140, 0.30);
    --exchange-danger-text:    #E0968C;
    --exchange-warning:        #D2B77F;
    --exchange-warning-bg:     rgba(210, 183, 127, 0.10);
    --exchange-bg-main:        #000000;
    --exchange-bg-secondary:   #050505;
    --exchange-bg-card:        #0A0A0A;
    --exchange-bg-hover:       #141414;
    --exchange-bg-input:       #0A0A0A;
    --exchange-border:         rgba(255, 255, 255, 0.10);
    --exchange-border-light:   rgba(255, 255, 255, 0.16);
    --exchange-text-primary:   #FFFFFF;
    --exchange-text-secondary: rgba(255, 255, 255, 0.68);
    --exchange-text-muted:     rgba(255, 255, 255, 0.45);
    --exchange-text-disabled:  rgba(255, 255, 255, 0.30);

    --bank-surface-sunken:   #050505;
    --bank-surface-hover:    #141414;
    --bank-expense-soft:     #E0968C;
    --bank-accent-soft:      rgba(255, 255, 255, 0.08);
    --bank-accent-hover:     rgba(255, 255, 255, 0.04);
    --bank-accent-border:    rgba(255, 255, 255, 0.24);
    --bank-accent-pressed:   #E6E6E6;
    --bank-focus-ring:       0 0 0 1px #FFFFFF;
    --bank-shadow-sm:        0 0 0 0 transparent;
    --bank-shadow-md:        0 0 0 0 transparent;
    --bank-shadow-lg:        0 0 0 0 transparent;
    --bank-shadow-card:      0 0 0 0 transparent;

    --ui-chip-active-bg:     #FFFFFF;
    --ui-chip-active-fg:     #000000;
    --ui-chip-active-glow:   transparent;
    --shadow-soft:           0 0 0 0 transparent;
    --shadow-medium:         0 0 0 0 transparent;
    --shadow-elevated:       0 0 0 0 transparent;
    --shadow-brand:          0 0 0 0 transparent;

    /* Shell: sidebar, topbar e conteúdo no mesmo chão preto */
    --shell-sidebar-bg:               #000000;
    --shell-sidebar-text:             rgba(255, 255, 255, 0.68);
    --shell-sidebar-text-muted:       rgba(255, 255, 255, 0.48);
    --shell-sidebar-section-label:    rgba(255, 255, 255, 0.48);
    --shell-sidebar-divider:          rgba(255, 255, 255, 0.10);
    --shell-sidebar-hover-bg:         rgba(255, 255, 255, 0.04);
    --shell-sidebar-active-bg:        rgba(255, 255, 255, 0.08);
    --shell-sidebar-active-text:      #FFFFFF;
    --shell-sidebar-active-indicator: #FFFFFF;
    --shell-topbar-bg:                #000000;
    --shell-topbar-border:            rgba(255, 255, 255, 0.10);
    --shell-topbar-text:              #FFFFFF;
    --shell-topbar-text-muted:        rgba(255, 255, 255, 0.48);
    --shell-topbar-icon:              #FFFFFF;
    --shell-topbar-hover-bg:          rgba(255, 255, 255, 0.06);
    --shell-content-bg:               #000000;
}

/* O <html> também pinta o fundo (overscroll no iOS/Android). */
html:root:has(body.dark-theme) {
    --bg-main: #000000;
    background: #000000;
}


/* -----------------------------------------------------------------------------
 * 4. EFEITOS DO SHELL QUE A MARCA PROÍBE
 *
 * O bundle desenha gradiente na sidebar, glow no item ativo e ambiência
 * radial no conteúdo, todos derivados da cor da marca. Com a marca em
 * preto/branco isso vira névoa. A marca pede superfície chapada e hairline.
 * ----------------------------------------------------------------------------- */
html app-sidebar-shell .sidebar {
    background: var(--shell-sidebar-bg);
}
html app-sidebar-shell .nav-item.is-active {
    font-weight: 500;
}
html app-sidebar-shell .nav-item.is-active::before {
    box-shadow: none !important;
}
/* (0,3,1): o bundle usa `:root:not(.dark-theme) .shell-content` (0,3,0),
 * que casa com o <html> nos DOIS modos, porque a classe fica no <body>. */
:root:root body .shell-content {
    background: var(--shell-content-bg);
}

::selection {
    background: var(--brand-primary);
    color: var(--brand-on-primary);
}