/* ============================================================
   Phrineffacc Design System — Foundations
   Tokens for color, type, spacing, radii, shadows.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap');

:root {
  /* ----- Brand palette (from Identidade.pdf, Cores e Fonte) ----- */
  --phn-navy:      #001432; /* primary brand color — text, headers, dark surfaces */
  --phn-red:       #C80101; /* accent — losango (decision marker), CTAs */
  --phn-teal:      #326464; /* secondary brand — logo strokes, accent text */
  --phn-gray-warm: #6E786E; /* warm gray — supporting text */
  --phn-gray-cool: #D7D7D7; /* cool light gray — surfaces, dividers */
  --phn-blue:      #0096DC; /* link / data viz */
  --phn-green:     #64B432; /* success / growth signal */

  /* ----- Tints & shades (oklch-derived for harmonic siblings) ----- */
  --phn-navy-90:  #1a2c4a;
  --phn-navy-80:  #334562;
  --phn-navy-60:  #667089;
  --phn-navy-10:  #e6e9ef;
  --phn-navy-05:  #f2f4f7;
  --phn-teal-80:  #4a7878;
  --phn-teal-20:  #d0dada;
  --phn-teal-10:  #e8eded;
  --phn-red-80:   #b50101;
  --phn-red-10:   #fce6e6;

  /* ----- Semantic surfaces ----- */
  --bg:            #ffffff;
  --bg-soft:       var(--phn-navy-05);
  --bg-muted:      var(--phn-teal-10);
  --bg-inverted:   var(--phn-navy);
  --surface:       #ffffff;
  --surface-raised:#ffffff;
  --divider:       var(--phn-gray-cool);
  --divider-soft:  var(--phn-navy-10);

  /* ----- Semantic foreground ----- */
  --fg:            var(--phn-navy);          /* primary text */
  --fg-muted:      var(--phn-gray-warm);     /* secondary text */
  --fg-subtle:     #98a0a8;                  /* tertiary / placeholder */
  --fg-on-dark:    #ffffff;
  --fg-on-dark-muted: #c1c8d2;
  --fg-accent:     var(--phn-teal);
  --fg-decision:   var(--phn-red);           /* the losango/decision color */
  --fg-link:       var(--phn-blue);
  --fg-success:    var(--phn-green);

  /* ----- Type families ----- */
  --font-display: 'Segoe UI', 'Open Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-body:    'Segoe UI', 'Open Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono:    'SFMono-Regular', Consolas, Menlo, monospace;

  /* ----- Type scale (PDF specifies "Segoe UI Light" — display weights kept light) ----- */
  --text-xs:    12px;
  --text-sm:    14px;
  --text-base:  16px;
  --text-md:    18px;
  --text-lg:    20px;
  --text-xl:    24px;
  --text-2xl:   30px;
  --text-3xl:   38px;
  --text-4xl:   48px;
  --text-5xl:   64px;
  --text-6xl:   80px;

  --leading-tight:   1.15;
  --leading-snug:    1.3;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  /* Light is the brand's signature display weight */
  --weight-light:   300;
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semi:    600;
  --weight-bold:    700;

  --tracking-display: 0.02em;
  --tracking-eyebrow: 0.18em;

  /* ----- Spacing (8pt rhythm) ----- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10:128px;

  /* ----- Radii (rounded rectangles = "processo alternativo" per brand notes) ----- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-xl: 22px;
  --radius-pill: 999px;

  /* ----- Shadows (subtle 3D bevel feel matches brand "efeito bisel") ----- */
  --shadow-xs: 0 1px 2px rgba(0,20,50,0.06);
  --shadow-sm: 0 2px 6px rgba(0,20,50,0.08);
  --shadow-md: 0 6px 18px rgba(0,20,50,0.10);
  --shadow-lg: 0 16px 40px rgba(0,20,50,0.14);
  --shadow-inset-bevel: inset 0 1px 0 rgba(255,255,255,0.45), inset 0 -1px 0 rgba(0,20,50,0.10);

  /* ----- Motion ----- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 380ms;

  /* ----- Layout ----- */
  --container: 1200px;
  --container-narrow: 880px;
}

/* ============================================================
   Semantic typography classes
   ============================================================ */

html, body {
  font-family: var(--font-body);
  color: var(--fg);
  background: var(--bg);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  font-weight: var(--weight-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.phn-display, h1.phn {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: var(--weight-light);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  color: var(--fg);
  margin: 0;
}

.phn-h1, h1 { font: var(--weight-light) var(--text-4xl)/var(--leading-tight) var(--font-display); letter-spacing: var(--tracking-display); margin: 0; color: var(--fg); }
.phn-h2, h2 { font: var(--weight-light) var(--text-3xl)/var(--leading-tight) var(--font-display); letter-spacing: var(--tracking-display); margin: 0; color: var(--fg); }
.phn-h3, h3 { font: var(--weight-regular) var(--text-2xl)/var(--leading-snug) var(--font-display); margin: 0; color: var(--fg); }
.phn-h4, h4 { font: var(--weight-medium) var(--text-xl)/var(--leading-snug) var(--font-display); margin: 0; color: var(--fg); }
.phn-h5, h5 { font: var(--weight-semi) var(--text-md)/var(--leading-snug) var(--font-display); margin: 0; color: var(--fg); }

.phn-eyebrow {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-semi);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-accent);
}

.phn-spaced-caps {
  font-family: var(--font-display);
  font-weight: var(--weight-light);
  letter-spacing: 0.42em;
  text-transform: uppercase;
}

p, .phn-body { font-size: var(--text-base); line-height: var(--leading-relaxed); color: var(--fg); margin: 0; }
.phn-body-lg { font-size: var(--text-md); line-height: var(--leading-relaxed); color: var(--fg); }
.phn-body-sm { font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--fg-muted); }
.phn-caption { font-size: var(--text-xs); line-height: var(--leading-normal); color: var(--fg-muted); letter-spacing: 0.04em; }

a, .phn-link { color: var(--fg-link); text-decoration: none; transition: opacity var(--dur-fast) var(--ease-out); }
a:hover, .phn-link:hover { opacity: 0.78; text-decoration: underline; }

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

.phn-losango {
  display: inline-block;
  width: 0.6em; height: 0.6em;
  background: var(--phn-red);
  transform: rotate(45deg);
  vertical-align: middle;
  margin-right: 0.5em;
  box-shadow: var(--shadow-inset-bevel);
}