/* ============================================
   MEDIATO BRAND - LAYER 2b (PRJ427)
   Herda: foundation.css + akme-tokens.css
   Override: tema light + paleta laranja/amarela do logo iMEDIATO
   ============================================

   IMPORT ORDER (em App.razor):
   1. foundation.css       (tokens slate dark)
   2. akme-tokens.css      (azul corporativo)
   3. mediato-tokens.css   <-- este (overrides Mediato)
   ============================================ */

:root {
  /* === SURFACE (tema light Mediato) === */
  --f-bg:             #ffffff;
  --f-surface:        #f8fafc;   /* slate-50 - cards */
  --f-surface-raised: #f1f5f9;   /* slate-100 - hover */
  --f-surface-hover:  #e2e8f0;   /* slate-200 */
  --f-surface-active: #cbd5e1;   /* slate-300 */

  /* === BORDER (mais sutil em light) === */
  --f-border:         #e2e8f0;   /* slate-200 */
  --f-border-subtle:  #f1f5f9;   /* slate-100 */
  --f-border-strong:  #cbd5e1;   /* slate-300 */
  --f-border-muted:   #94a3b8;   /* slate-400 */

  /* === TEXT (invertido pra fundo claro) === */
  --f-text:           #0f172a;   /* slate-900 */
  --f-text-secondary: #475569;   /* slate-600 */
  --f-text-muted:     #64748b;   /* slate-500 */
  --f-text-disabled:  #94a3b8;   /* slate-400 */
  --f-text-inverse:   #ffffff;

  /* === MEDIATO PRIMARY (laranja do logo iMEDIATO) === */
  --akme-primary-50:  #fff7ed;
  --akme-primary-100: #ffedd5;
  --akme-primary-200: #fed7aa;
  --akme-primary-300: #fdba74;
  --akme-primary-400: #fb923c;
  --akme-primary-500: #f97316;   /* Primary (orange-500) */
  --akme-primary-600: #ea580c;   /* Primary hover (orange-600) */
  --akme-primary-700: #c2410c;
  --akme-primary-800: #9a3412;
  --akme-primary-900: #7c2d12;
  --akme-primary-950: #431407;

  --akme-primary:      var(--akme-primary-500);
  --akme-primary-hover:var(--akme-primary-600);
  --akme-primary-soft: rgba(249, 115, 22, 0.10);
  --akme-primary-text: var(--akme-primary-600); /* legivel em light bg */

  /* === MEDIATO ACCENT (amarelo do logo) === */
  --akme-accent:       #fbbf24;   /* amber-400 */
  --akme-accent-hover: #f59e0b;   /* amber-500 */
  --akme-accent-soft:  rgba(251, 191, 36, 0.12);

  /* === GRADIENTS Mediato === */
  --akme-gradient-hero: linear-gradient(135deg, #fff7ed 0%, #ffffff 50%, #fffbeb 100%);
  --akme-gradient-card: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  --akme-gradient-cta:  linear-gradient(135deg, var(--akme-primary-600) 0%, var(--akme-accent) 100%);
  --mediato-logo-gradient: linear-gradient(90deg, var(--akme-accent) 0%, var(--akme-primary-500) 60%, var(--akme-primary-600) 100%);

  /* === GLOWS adaptados pra light === */
  --akme-glow-primary: 0 0 12px rgba(249, 115, 22, 0.25);
  --akme-glow-accent:  0 0 12px rgba(251, 191, 36, 0.30);

  --akme-surface-tint: rgba(249, 115, 22, 0.03);

  /* === SHADOWS para tema light === */
  --f-shadow-sm:  0 1px 2px rgba(15, 23, 42, 0.04);
  --f-shadow-md:  0 2px 8px rgba(15, 23, 42, 0.06);
  --f-shadow-lg:  0 8px 24px rgba(15, 23, 42, 0.08);
  --f-shadow-xl:  0 16px 40px rgba(15, 23, 42, 0.10);
}

/* === RESET base com tema light === */
html {
  color: var(--f-text);
  background-color: var(--f-bg);
}

/* === NAV translucido light === */
.akme-nav {
  background: rgba(255, 255, 255, 0.85);
  border-bottom: 1px solid var(--f-border);
}

/* === Card no light com sombra suave === */
.akme-card {
  background: var(--f-surface);
  border: 1px solid var(--f-border);
  box-shadow: var(--f-shadow-sm);
}

.akme-card:hover {
  border-color: var(--akme-primary-200);
  box-shadow: var(--f-shadow-md);
}

/* === Input em tema light === */
.akme-input {
  background: #ffffff;
  border-color: var(--f-border);
  color: var(--f-text);
}

.akme-input:read-only,
.akme-input[readonly] {
  background: var(--f-surface);
}

/* === Logo Mediato (texto com gradient laranja/amarelo) === */
.mediato-logo {
  font-weight: 800;
  letter-spacing: -0.02em;
  background: var(--mediato-logo-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* === Logo Mediato (wordmark PNG transparente) - substitui o texto com gradient === */
.mediato-logo-img { height: 30px; width: auto; display: block; }
.mediato-logo-img--lg { height: 40px; }

/* === Badge primario do Mediato === */
.akme-badge-primary {
  background: var(--akme-primary-soft);
  color: var(--akme-primary-text);
}