/* =====================================================================
   Finori — Colors & Type
   "Oatmeal Olive Instrument" — adapted for web
   ===================================================================== */

:root {
  /* ---------- Backgrounds ---------- */
  --color-oatmeal:        #FAF7F2;   /* primary bg */
  --color-linen:          #F5F1EB;   /* secondary bg */
  --color-white:          #FFFFFF;   /* cards */
  --color-soft-sage:      #F0F7F4;   /* highlights */

  /* ---------- Brand / Accent ---------- */
  --color-forest-green:   #2D6A4F;   /* primary CTA */
  --color-deep-green:     #245A42;   /* hover */
  --color-sage-border:    #C6DDD4;   /* accents */
  --color-amber:          #B45309;   /* warnings */

  /* ---------- Text ---------- */
  --color-charcoal:       #1A1A1A;   /* headings */
  --color-warm-dark:      #3D3A36;   /* body */
  --color-medium-gray:    #5C5955;   /* secondary text */
  --color-muted:          #8A857F;   /* labels */

  /* ---------- Hairlines / borders ---------- */
  --color-border:         #E8E4DF;   /* 1px solid */

  /* ---------- Semantic aliases ---------- */
  --bg:                   var(--color-oatmeal);
  --bg-2:                 var(--color-linen);
  --bg-card:              var(--color-white);
  --bg-highlight:         var(--color-soft-sage);

  --fg:                   var(--color-charcoal);
  --fg-body:              var(--color-warm-dark);
  --fg-2:                 var(--color-medium-gray);
  --fg-muted:             var(--color-muted);

  --accent:               var(--color-forest-green);
  --accent-hover:         var(--color-deep-green);
  --accent-soft:          var(--color-sage-border);
  --warning:              var(--color-amber);

  --border:               var(--color-border);

  /* ---------- Status (SaaS) ---------- */
  --status-compliant:     var(--color-forest-green);
  --status-review:        var(--color-amber);
  --status-required:      #b91c1c;
  --status-pending:       var(--color-muted);

  /* ---------- Typography ---------- */
  --font-serif:           Georgia, "Times New Roman", serif;
  --font-sans:            Arial, Helvetica, system-ui, sans-serif;

  /* type scale (px) */
  --fs-h1:                42px;
  --fs-h2:                32px;
  --fs-h3:                22px;
  --fs-body:              16px;
  --fs-small:             14px;
  --fs-label:             11px;

  --lh-h1:                1.2;
  --lh-h2:                1.3;
  --lh-h3:                1.4;
  --lh-body:              1.6;
  --lh-small:             1.5;
  --lh-label:             1.4;

  /* ---------- Spacing & layout ---------- */
  --container-max:        1200px;
  --section-py:           80px;
  --section-px:           24px;
  --card-p:               24px;
  --grid-gap:             24px;
  --radius-card:          12px;
  --radius-button:        8px;
  --radius-pill:          999px;

  /* ---------- Breakpoints (reference) ---------- */
  --bp-mobile:            640px;
  --bp-tablet:            768px;
  --bp-desktop:           1024px;

  /* ---------- Shadow ---------- */
  --shadow-card:          0 1px 2px rgba(26,26,26,.04), 0 2px 8px rgba(26,26,26,.04);
  --shadow-pop:           0 4px 16px rgba(26,26,26,.08);

  /* ---------- Motion ---------- */
  --ease-out:             cubic-bezier(.2,.7,.2,1);
  --dur-fast:             120ms;
  --dur-base:             200ms;
}

/* =====================================================================
   Element-level defaults
   ===================================================================== */

html, body {
  background: var(--bg);
  color: var(--fg-body);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  color: var(--fg);
  font-weight: 400;          /* serif headings render normal weight */
  letter-spacing: -0.005em;
  margin: 0;
}

h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); }

p  { margin: 0; }

small, .small {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--fg-2);
}

.label, .eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--fg-muted);
  font-weight: 700;
}

a {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--accent-hover); }

hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 0;
}

/* =====================================================================
   Reusable atoms
   ===================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  border-radius: var(--radius-button);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
  line-height: 1;
}
.btn-primary {
  background: var(--accent);
  color: var(--color-white);
}
.btn-primary:hover { background: var(--accent-hover); }
.btn-primary:active { transform: translateY(1px); }

.btn-secondary {
  background: transparent;
  color: var(--fg);
  border-color: var(--border);
}
.btn-secondary:hover { background: var(--bg-2); }

.btn-link {
  background: transparent;
  color: var(--accent);
  padding: 0;
  border: 0;
}
.btn-link:hover { color: var(--accent-hover); }

.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--card-p);
}

.card-highlight {
  background: var(--bg-highlight);
  border: 1px solid var(--accent-soft);
  border-radius: var(--radius-card);
  padding: var(--card-p);
}

.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}
.status-compliant  { color: var(--status-compliant); }
.status-compliant  .status-dot { background: var(--status-compliant); }
.status-review     { color: var(--status-review); }
.status-review     .status-dot { background: var(--status-review); }
.status-required   { color: var(--status-required); }
.status-required   .status-dot { background: var(--status-required); }
.status-pending    { color: var(--status-pending); }
.status-pending    .status-dot { background: var(--status-pending); }

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--section-px);
}
.section { padding: var(--section-py) 0; }