/* =========================================================
   NN.ai Design System — colors_and_type.css
   Source of truth for color tokens + typography vars.
   Mirrors nnstudio-agent-platform/src/index.css + DESIGN.md.
   ========================================================= */

/* Webfont imports — DEVEM vir antes de qualquer @font-face/regra (spec CSS),
   senão o navegador ignora os @import e as fontes não carregam. */
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap");

/* =========================================================
   Webfonts

   OFFICIAL BRAND TYPEFACE: Raleway
   Per `uploads/manual-da-marca.pdf` + user-supplied TTFs in /fonts.
   Serves marketing, brand, and display surfaces.

   UI TYPEFACE: Inter
   Used across the production intranet (nnstudio-agent-platform/src/index.css).
   Kept for the app shell where readability at small sizes matters more than
   brand expression.

   Tech/code: JetBrains Mono.
   Legacy identity (Login/Inicio): Syne, Plus Jakarta — still in codebase.
   ========================================================= */

/* --- Raleway (brand) — local variable + static fallbacks --- */
@font-face {
  font-family: "Raleway";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/Raleway-VariableFont_wght.ttf") format("truetype-variations");
}
@font-face {
  font-family: "Raleway";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/Raleway-Italic-VariableFont_wght.ttf") format("truetype-variations");
}

:root {
  /* ---------- FONT FAMILIES ----------
     Official brand (Manual da Marca): Raleway — display, marketing, brand surfaces.
     Interface: Inter for the intranet app shell (matches codebase).
     Technical: JetBrains Mono for codes, CNPJs, monetary values.
     Legacy/identity accents: Syne + Plus Jakarta — still present on codebase
     surfaces like Login + Inicio (RotatingBadge, CEO page).
  */
  --font-brand:   "Manrope", "Helvetica Neue", Arial, sans-serif;   /* standalone NN — display/brand */
  --font-sans:    "Manrope", "Helvetica Neue", Arial, sans-serif;   /* UI shell */
  --font-mono:    "Manrope", "Helvetica Neue", Arial, sans-serif;   /* standalone usa Manrope nos números (sem mono) */
  --font-display: "Manrope", "Helvetica Neue", Arial, sans-serif;   /* hero surfaces */
  --font-legacy:  "Space Grotesk", "Manrope", system-ui, sans-serif; /* acento técnico / badges */

  /* ---------- TYPE SCALE ---------- */
  --text-xs:   0.75rem;   /* 12px — labels, badges */
  --text-sm:   0.875rem;  /* 14px — body small, table cells */
  --text-base: 1rem;      /* 16px — body default */
  --text-lg:   1.125rem;  /* 18px */
  --text-xl:   1.25rem;   /* 20px — card titles */
  --text-2xl:  1.5rem;    /* 24px — CardTitle */
  --text-3xl:  1.875rem;  /* 30px — hero H1 */
  --text-4xl:  2.25rem;   /* 36px */
  --text-5xl:  3rem;      /* 48px — splash */

  /* weights */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  /* leading / tracking */
  --leading-tight: 1.2;
  --leading-snug: 1.35;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;
  --tracking-wide: 0.02em;
  --tracking-uppercase: 0.14em; /* for the all-caps institutional labels */

  /* ---------- CORE PALETTE (HSL — codebase source of truth) ---------- */
  --background:   0 0% 98%;
  --foreground: 184 64% 14%;

  --card:            0 0% 100%;
  --card-foreground: 184 64% 14%;

  --popover:            0 0% 100%;
  --popover-foreground: 184 64% 14%;

  --primary:              184 64% 14%; /* teal institucional #0D383B */
  --primary-foreground:     0 0% 98%;

  --secondary:            184 30% 92%;
  --secondary-foreground: 184 64% 14%;

  --muted:              184 20% 94%;
  --muted-foreground:   184 20% 40%;

  --accent:              184 50% 25%;
  --accent-foreground:     0 0% 98%;

  --destructive:              0 84.2% 60.2%;
  --destructive-foreground:   0 0%    98%;

  --border: 184 20% 88%;
  --input:  184 20% 88%;
  --ring:   184 64% 14%;

  --nnstudio-ink:         184 64% 14%;
  --nnstudio-border-soft: 184 21% 87%;
  --nnstudio-text-muted:    0 0% 25%;

  --radius: 0.5rem;

  /* sidebar — dark teal rail */
  --sidebar-background:         184 64% 14%;
  --sidebar-foreground:           0 0% 98%;
  --sidebar-primary:            184 50% 25%;
  --sidebar-primary-foreground:   0 0% 98%;
  --sidebar-accent:             184 50% 20%;
  --sidebar-accent-foreground:    0 0% 98%;
  --sidebar-border:             184 50% 20%;
  --sidebar-ring:               184 50% 35%;

  /* ---------- BRAND HEX (observed literals — see DESIGN.md §Cores) ---------- */
  --brand-teal-ink:     #0d383b;  /* main ink, sidebar base, heading text */
  --brand-teal-900:     #003e44;
  --brand-teal-800:     #0c5057;
  --brand-teal-700:     #0d5d63;
  --brand-teal-600:     #16747d;
  --brand-teal-500:     #188891;
  --brand-teal-400:     #1fa0aa;
  --brand-teal-300:     #2ba9b3;
  --brand-teal-accent:  #1a494d;  /* active nav item bg */
  --brand-deep-184246:  #184246;  /* rotating badge bg */

  /* warm brand accents (from rotating badge textPath, CEO page, identity assets) */
  --brand-sand:     #b29c7d;  /* corePillPulse glow, institutional warmth */
  --brand-sand-low: #af9675;  /* rotating badge text */

  /* neutral / surfaces */
  --surface-app:        #f3f5f7;  /* admin shell bg */
  --surface-app-alt:    #f2f5f5;
  --surface-brand-soft: #e7ecec;
  --surface-brand-mint: #e6f4f5;
  --surface-brand-aqua: #e7f6f7;
  --surface-card:       #ffffff;
  --surface-hover:      #eaf0f0;

  /* semantic state */
  --success-fg: #15803d;
  --success-fg-deep: #166534;
  --success-bg: #ecfdf3;
  --danger-fg:  #b91c1c;
  --danger-fg-deep: #991b1b;
  --danger-bg:  #fef2f2;
  --danger-pill: #ff5a5f;   /* notification dot */
  --warning-fg: #92400e;
  --warning-bg: #fef3c7;
  --staging-red: #d92d20;   /* "Base Teste" banner */

  /* ---------- SHORTHAND FG / BG VARS (for design system consumers) ---------- */
  --fg-1: var(--brand-teal-ink);          /* primary text, headings */
  --fg-2: #0d5d63;                        /* secondary heading / link hover */
  --fg-3: #5f6b6c;                        /* muted text, icon inactive */
  --fg-4: #8a9394;                        /* placeholder, caption */
  --fg-on-dark: #ffffff;
  --fg-on-dark-muted: rgba(255,255,255,0.75);

  --bg-app: var(--surface-app);
  --bg-card: #ffffff;
  --bg-sidebar: var(--brand-teal-ink);

  /* ---------- SHADOWS ---------- */
  --shadow-sm: 0 1px 2px rgba(13, 56, 59, 0.06);
  --shadow-md: 0 6px 18px rgba(13, 56, 59, 0.08);
  --shadow-lg: 0 18px 40px rgba(13, 56, 59, 0.14);
  --shadow-hero: 0 18px 40px rgba(13, 56, 59, 0.16);
  --shadow-ring-focus: 0 0 0 3px rgba(13, 56, 59, 0.18);

  /* ---------- RADII ---------- */
  --radius-sm: 0.375rem;   /* 6px */
  --radius-md: 0.5rem;     /* 8px  — buttons, inputs (rounded-md) */
  --radius-lg: 0.75rem;    /* 12px — rounded-xl ish */
  --radius-xl: 1rem;       /* 16px — cards */
  --radius-2xl: 1.25rem;   /* 20px — hero cards, feature cards */
  --radius-pill: 999px;

  /* ---------- SPACING (tailwind aligned) ---------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* ---------- GRADIENTS (from hero banner usage) ---------- */
  --gradient-hero-teal: linear-gradient(90deg, rgba(13,93,99,0.90), rgba(24,136,145,0.80));
  --gradient-hero-deep: linear-gradient(135deg, #0d383b 0%, #0d5d63 60%, #16747d 100%);
  --gradient-brand-wash: linear-gradient(180deg, #e7f6f7 0%, #ffffff 100%);
}

/* =========================================================
   Semantic element styles — use these directly or as reference
   ========================================================= */

.ds-app-body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--fg-1);
  background: var(--bg-app);
}

/* Legacy brand body (still present on Inicio / Login / Identidade) */
.ds-brand-body {
  font-family: var(--font-brand);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
}

.ds-h1 {
  font-family: var(--font-sans);
  font-size: var(--text-3xl);
  font-weight: var(--fw-bold);
  line-height: var(--leading-tight);
  color: var(--fg-1);
  letter-spacing: -0.01em;
}
.ds-h2 {
  font-family: var(--font-sans);
  font-size: var(--text-2xl);
  font-weight: var(--fw-semibold);
  line-height: var(--leading-snug);
  color: var(--fg-1);
  letter-spacing: -0.005em;
}
.ds-h3 {
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  font-weight: var(--fw-semibold);
  line-height: var(--leading-snug);
  color: var(--fg-1);
}
.ds-h4 {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
}

.ds-p {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--fg-1);
}
.ds-p-muted { color: var(--fg-3); }

.ds-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-uppercase);
  text-transform: uppercase;
  color: var(--fg-3);
}

/* The all-caps nav label style (from MainLayout renderNavButton) */
.ds-nav-label {
  font-family: var(--font-brand);
  font-size: 10px;
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-uppercase);
  color: #fff;
}

.ds-code, .ds-mono {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-feature-settings: "liga" 0;
}

.ds-link {
  color: var(--brand-teal-700);
  text-decoration: none;
  font-weight: var(--fw-medium);
}
.ds-link:hover { text-decoration: underline; }

/* ---------- Utility classes ---------- */
.ds-surface-card {
  background: var(--bg-card);
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}
.ds-surface-muted {
  background: var(--surface-app);
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-xl);
}
.ds-hero-gradient {
  background-image: var(--gradient-hero-teal);
  color: #fff;
}