/* =============================================================
   SITE EXPRESS — Foundational Tokens
   Colors + Typography for digital applications
   Source: Site Express Diretrizes Técnicas (assets/docs/)
   ============================================================= */

/* ---------- Fonts ---------- */

@font-face {
  font-family: 'Archivo';
  src: url('fonts/Archivo-ExtraLight.ttf') format('truetype');
  font-weight: 200; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('fonts/Archivo-Light.ttf') format('truetype');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('fonts/Archivo-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('fonts/Archivo-Italic.ttf') format('truetype');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('fonts/Archivo-Medium.ttf') format('truetype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('fonts/Archivo-MediumItalic.ttf') format('truetype');
  font-weight: 500; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('fonts/Archivo-SemiBold.ttf') format('truetype');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('fonts/Archivo-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('fonts/Archivo-BoldItalic.ttf') format('truetype');
  font-weight: 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('fonts/Archivo-ExtraBold.ttf') format('truetype');
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('fonts/Archivo-Black.ttf') format('truetype');
  font-weight: 900; font-style: normal; font-display: swap;
}

@font-face {
  font-family: 'Blauer Nue';
  src: url('fonts/BlauerNue-Light.woff2') format('woff2');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Blauer Nue';
  src: url('fonts/BlauerNue-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Blauer Nue';
  src: url('fonts/BlauerNue-Italic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Blauer Nue';
  src: url('fonts/BlauerNue-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Blauer Nue';
  src: url('fonts/BlauerNue-SemiBold.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Blauer Nue';
  src: url('fonts/BlauerNue-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Blauer Nue';
  src: url('fonts/BlauerNue-BoldItalic.woff2') format('woff2');
  font-weight: 700; font-style: italic; font-display: swap;
}

/* ---------- Design Tokens ---------- */

:root {
  /* ===== BRAND COLORS ===== */
  --se-aqua-slate:  #4DAEB5;   /* primary brand — the teal "S" */
  --se-deep-teal:   #427F82;   /* secondary brand — overlays + depth */
  --se-void-dark:   #0D0D0F;   /* primary surface / near-black */
  --se-white:       #FFFFFF;

  /* ===== TEAL SCALE (derived from Aqua Slate) ===== */
  --se-teal-50:   #EAF6F7;
  --se-teal-100:  #CFEAEC;
  --se-teal-200:  #A6D8DC;
  --se-teal-300:  #7CC4C9;
  --se-teal-400:  #4DAEB5;   /* = Aqua Slate */
  --se-teal-500:  #427F82;   /* = Deep Teal */
  --se-teal-600:  #356668;
  --se-teal-700:  #294F51;
  --se-teal-800:  #1C3739;
  --se-teal-900:  #112224;

  /* ===== NEUTRAL SCALE (cool, tech-leaning) ===== */
  --se-neutral-0:    #FFFFFF;
  --se-neutral-50:   #F7F7F8;
  --se-neutral-100:  #EDEDEF;
  --se-neutral-200:  #D9D9DD;
  --se-neutral-300:  #B8B8BE;
  --se-neutral-400:  #8A8A91;
  --se-neutral-500:  #5F5F66;
  --se-neutral-600:  #3F3F44;
  --se-neutral-700:  #2A2A2E;
  --se-neutral-800:  #1A1A1D;
  --se-neutral-900:  #111113;
  --se-neutral-1000: #0D0D0F;  /* = Void Dark */

  /* ===== SEMANTIC TOKENS — LIGHT MODE (default) =====
     Light and dark are EQUAL siblings. We pick light as the unstyled
     default because the primary logo (teal + black text) is built for it.
     Switch by adding `data-theme="dark"` to <html> or use the
     prefers-color-scheme media query below. */
  --se-bg:           var(--se-white);
  --se-bg-elevated:  #FAFAFB;
  --se-bg-overlay:   #F4F5F6;
  --se-surface:      #F7F7F8;
  --se-border:       rgba(13, 13, 15, 0.08);
  --se-border-strong:rgba(13, 13, 15, 0.18);
  --se-divider:      rgba(13, 13, 15, 0.06);

  --se-fg:           var(--se-void-dark);
  --se-fg-muted:     rgba(13, 13, 15, 0.72);
  --se-fg-subtle:    rgba(13, 13, 15, 0.54);
  --se-fg-faint:     rgba(13, 13, 15, 0.32);

  --se-accent:       var(--se-aqua-slate);
  --se-accent-hover: #5CBDC3;
  --se-accent-press: #3F9AA1;
  --se-accent-soft:  rgba(77, 174, 181, 0.12);

  /* explicit aliases — useful when you need the OTHER theme inline */
  --se-bg-dark:           var(--se-void-dark);
  --se-bg-dark-elevated:  #16161A;
  --se-bg-dark-overlay:   #1F1F23;
  --se-surface-dark:      #1A1A1D;
  --se-border-dark:       rgba(255, 255, 255, 0.08);
  --se-border-dark-strong:rgba(255, 255, 255, 0.18);

  --se-fg-on-dark:        var(--se-white);
  --se-fg-on-dark-muted:  rgba(255, 255, 255, 0.72);
  --se-fg-on-dark-subtle: rgba(255, 255, 255, 0.52);
  --se-fg-on-dark-faint:  rgba(255, 255, 255, 0.32);

  /* ===== STATUS — minimal, reads as system not decoration ===== */
  --se-success:  #3FA678;
  --se-warning:  #D9A24B;
  --se-danger:   #D9534B;
  --se-info:     var(--se-aqua-slate);

  /* ===== OVERLAY / GRAPHISM (per diretrizes: 10–30% opacity) ===== */
  --se-overlay-teal-10: rgba(77, 174, 181, 0.10);
  --se-overlay-teal-20: rgba(77, 174, 181, 0.20);
  --se-overlay-teal-30: rgba(77, 174, 181, 0.30);

  /* line graphism — fine lines 1–2px, 8–20% white on dark, 100% teal */
  --se-line: rgba(255, 255, 255, 0.12);
  --se-line-strong: rgba(255, 255, 255, 0.20);
  --se-line-accent: var(--se-aqua-slate);

  /* ===== TYPOGRAPHY ===== */
  --se-font-display:  'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --se-font-body:     'Blauer Nue', 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --se-font-mono:     ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;

  /* Type scale — modular, generous on the headline end */
  --se-text-xs:    0.75rem;   /* 12px — labels, micro */
  --se-text-sm:    0.875rem;  /* 14px — secondary */
  --se-text-base:  1rem;      /* 16px — body default */
  --se-text-md:    1.125rem;  /* 18px — comfortable body */
  --se-text-lg:    1.375rem;  /* 22px — lead */
  --se-text-xl:    1.75rem;   /* 28px — h4 */
  --se-text-2xl:   2.25rem;   /* 36px — h3 */
  --se-text-3xl:   3rem;      /* 48px — h2 */
  --se-text-4xl:   4rem;      /* 64px — h1 */
  --se-text-5xl:   5.5rem;    /* 88px — hero */
  --se-text-6xl:   7.5rem;    /* 120px — display */

  --se-leading-tight:   1.05;
  --se-leading-snug:    1.2;
  --se-leading-normal:  1.45;
  --se-leading-relaxed: 1.6;

  --se-tracking-tight:  -0.02em;
  --se-tracking-snug:   -0.01em;
  --se-tracking-normal: 0;
  --se-tracking-wide:    0.04em;
  --se-tracking-wider:   0.12em;   /* eyebrow / uppercase labels */

  /* ===== SPACING (4px base) ===== */
  --se-space-0:  0;
  --se-space-1:  0.25rem;  /*  4px */
  --se-space-2:  0.5rem;   /*  8px */
  --se-space-3:  0.75rem;  /* 12px */
  --se-space-4:  1rem;     /* 16px */
  --se-space-5:  1.5rem;   /* 24px */
  --se-space-6:  2rem;     /* 32px */
  --se-space-7:  3rem;     /* 48px */
  --se-space-8:  4rem;     /* 64px */
  --se-space-9:  6rem;     /* 96px */
  --se-space-10: 8rem;     /* 128px */

  /* ===== RADIUS — geometric, minimal rounding ===== */
  --se-radius-none: 0;
  --se-radius-xs:   2px;
  --se-radius-sm:   4px;
  --se-radius-md:   6px;
  --se-radius-lg:   10px;
  --se-radius-xl:   16px;
  --se-radius-pill: 999px;

  /* ===== SHADOWS — restrained, mostly used on light surfaces ===== */
  --se-shadow-xs: 0 1px 2px rgba(13, 13, 15, 0.06);
  --se-shadow-sm: 0 2px 6px rgba(13, 13, 15, 0.08);
  --se-shadow-md: 0 8px 24px rgba(13, 13, 15, 0.10);
  --se-shadow-lg: 0 20px 50px rgba(13, 13, 15, 0.16);
  --se-shadow-focus: 0 0 0 3px rgba(77, 174, 181, 0.35);

  /* ===== MOTION ===== */
  --se-ease-out:   cubic-bezier(0.2, 0.7, 0.2, 1);
  --se-ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --se-dur-fast:   120ms;
  --se-dur-base:   180ms;
  --se-dur-slow:   320ms;

  /* ===== LAYOUT ===== */
  --se-max-w-prose:    65ch;
  --se-max-w-content:  1200px;
  --se-max-w-wide:     1440px;
  --se-grid-gutter:    var(--se-space-5);
}

/* =============================================================
   SEMANTIC TYPE STYLES
   Use these classes/tag styles rather than re-declaring locally.
   ============================================================= */

.se-eyebrow,
.se-overline {
  font-family: var(--se-font-display);
  font-weight: 500;
  font-size: var(--se-text-xs);
  letter-spacing: var(--se-tracking-wider);
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--se-fg-subtle);
}

.se-display {
  font-family: var(--se-font-display);
  font-weight: 700;
  font-size: clamp(3.5rem, 6vw + 1rem, var(--se-text-6xl));
  line-height: var(--se-leading-tight);
  letter-spacing: var(--se-tracking-tight);
}

.se-h1, h1 {
  font-family: var(--se-font-display);
  font-weight: 700;
  font-size: clamp(2.5rem, 4vw + 1rem, var(--se-text-4xl));
  line-height: var(--se-leading-tight);
  letter-spacing: var(--se-tracking-tight);
  margin: 0;
}

.se-h2, h2 {
  font-family: var(--se-font-display);
  font-weight: 700;
  font-size: clamp(2rem, 3vw + 0.5rem, var(--se-text-3xl));
  line-height: var(--se-leading-snug);
  letter-spacing: var(--se-tracking-snug);
  margin: 0;
}

.se-h3, h3 {
  font-family: var(--se-font-display);
  font-weight: 600;
  font-size: var(--se-text-2xl);
  line-height: var(--se-leading-snug);
  letter-spacing: var(--se-tracking-snug);
  margin: 0;
}

.se-h4, h4 {
  font-family: var(--se-font-display);
  font-weight: 600;
  font-size: var(--se-text-xl);
  line-height: var(--se-leading-snug);
  margin: 0;
}

.se-h5, h5 {
  font-family: var(--se-font-display);
  font-weight: 600;
  font-size: var(--se-text-lg);
  line-height: var(--se-leading-snug);
  margin: 0;
}

.se-lead {
  font-family: var(--se-font-body);
  font-weight: 400;
  font-size: var(--se-text-lg);
  line-height: var(--se-leading-relaxed);
  color: var(--se-fg-muted);
}

.se-body, p {
  font-family: var(--se-font-body);
  font-weight: 400;
  font-size: var(--se-text-base);
  line-height: var(--se-leading-relaxed);
  margin: 0;
}

.se-body-sm, small {
  font-family: var(--se-font-body);
  font-weight: 400;
  font-size: var(--se-text-sm);
  line-height: var(--se-leading-normal);
  color: var(--se-fg-muted);
}

.se-caption {
  font-family: var(--se-font-body);
  font-weight: 400;
  font-size: var(--se-text-xs);
  line-height: var(--se-leading-normal);
  color: var(--se-fg-subtle);
}

.se-label {
  font-family: var(--se-font-display);
  font-weight: 500;
  font-size: var(--se-text-sm);
  letter-spacing: 0.01em;
  line-height: 1.2;
}

.se-mono, code, kbd, pre {
  font-family: var(--se-font-mono);
  font-size: 0.92em;
}

/* =============================================================
   THEME SWITCHING
   Two modes, equal priority. Pick one:
   - <html data-theme="dark"> for an explicit dark page
   - <html data-theme="light"> for an explicit light page
   - Omit and the user's OS preference is honored.
   ============================================================= */

html[data-theme="dark"],
.theme-dark {
  --se-bg:           var(--se-void-dark);
  --se-bg-elevated:  #16161A;
  --se-bg-overlay:   #1F1F23;
  --se-surface:      #1A1A1D;
  --se-border:       rgba(255, 255, 255, 0.08);
  --se-border-strong:rgba(255, 255, 255, 0.18);
  --se-divider:      rgba(255, 255, 255, 0.06);

  --se-fg:           var(--se-white);
  --se-fg-muted:     rgba(255, 255, 255, 0.72);
  --se-fg-subtle:    rgba(255, 255, 255, 0.52);
  --se-fg-faint:     rgba(255, 255, 255, 0.32);

  --se-accent-soft:  rgba(77, 174, 181, 0.14);

  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme]) {
    --se-bg:           var(--se-void-dark);
    --se-bg-elevated:  #16161A;
    --se-bg-overlay:   #1F1F23;
    --se-surface:      #1A1A1D;
    --se-border:       rgba(255, 255, 255, 0.08);
    --se-border-strong:rgba(255, 255, 255, 0.18);
    --se-divider:      rgba(255, 255, 255, 0.06);
    --se-fg:           var(--se-white);
    --se-fg-muted:     rgba(255, 255, 255, 0.72);
    --se-fg-subtle:    rgba(255, 255, 255, 0.52);
    --se-fg-faint:     rgba(255, 255, 255, 0.32);
    --se-accent-soft:  rgba(77, 174, 181, 0.14);
    color-scheme: dark;
  }
}

html { color-scheme: light; }
body {
  background: var(--se-bg);
  color: var(--se-fg);
  font-family: var(--se-font-body);
  font-size: var(--se-text-base);
  line-height: var(--se-leading-relaxed);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}