﻿/* ok8ka.com — foundation · variáveis, reset, shell, container */

@import url("css2.css");

:root {
  --layout-max: 100%;
  --nav-pad-x: clamp(8px, 2.8vw, 14px);
  --header-full: 106px;
  --header-gap: 6px;
  --header-offset: calc(var(--header-full) + var(--header-gap));
  --z-header: 9000;
  --z-dropdown: 9001;

  --canvas: #edf3f0;
  --canvas-edge: #071510;
  --surface-top: #f6faf8;
  --surface-soft: #e8f2ec;
  --surface-raised: #ffffff;
  --shell-border: #143d2c;

  --color-text: #122820;
  --color-text-muted: #3d5c4e;
  --color-text-light: #ffffff;
  --color-heading: #0a3324;
  --color-heading-accent: #156b4a;

  --color-blue: #156b4a;
  --color-green: #1a8f66;
  --color-green-soft: rgba(21, 107, 74, 0.1);
  --color-gold: #c8870a;
  --color-btn: #e8a838;
  --color-btn-dark: #d4922a;
  --color-btn-text: #1a1200;

  --color-card-bg: #ffffff;
  --color-card-inner: #edf5f0;
  --color-card-border: rgba(21, 107, 74, 0.16);
  --border-soft: rgba(10, 51, 36, 0.1);
  --border-mint-soft: rgba(21, 107, 74, 0.14);

  --color-app-bar: #071510;
  --color-app-bar-border: #123024;
  --color-nav: #05120e;
  --color-nav-border: #143528;
  --color-burger: #8fb5a0;
  --color-active: rgba(21, 107, 74, 0.22);

  --body-font-size: 0.9375rem;
  --body-line-height: 1.65;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 3px rgba(7, 21, 16, 0.08);
  --shadow-md: 0 4px 16px rgba(7, 21, 16, 0.1);
  --shadow-card: 0 2px 14px rgba(10, 51, 36, 0.08);
  --shadow-blue: 0 2px 10px rgba(21, 107, 74, 0.32);
  --shadow-btn: 0 2px 12px rgba(232, 168, 56, 0.38);

  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;

  --transition-fast: 0.15s ease;
  --gradient-hero: linear-gradient(180deg, var(--surface-raised) 0%, var(--surface-top) 55%, var(--surface-soft) 100%);
  --gradient-promo: linear-gradient(135deg, #156b4a 0%, #1a8f66 52%, #c8870a 100%);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-offset);
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  background: var(--canvas);
}

html[data-ui-contain="1"] {
  background: var(--canvas-edge);
}

body {
  margin: 0;
  min-height: 100vh;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: var(--body-font-size);
  line-height: var(--body-line-height);
  color: var(--color-text);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
}

html[data-ui-contain="1"] body {
  background: var(--canvas-edge);
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

.shell {
  position: relative;
  left: 50%;
  width: min(100%, var(--layout-max));
  max-width: var(--layout-max);
  min-height: 100vh;
  margin-inline: 0;
  transform: translateX(-50%);
  overflow-x: hidden;
  background: var(--surface-top);
  border-inline: 1px solid transparent;
}

html[data-ui-contain="1"] .shell {
  border-inline-color: var(--shell-border);
}

.site-main {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  padding-top: var(--header-offset);
  overflow-x: hidden;
}

.container {
  width: 100%;
  max-width: var(--layout-max);
  margin-inline: auto;
  padding-inline: var(--nav-pad-x);
  min-width: 0;
}
