/* ============================================================
   Odontal Web — Colors & Type
   Foundation tokens for the Odontal Web brand.
   ============================================================ */

@font-face {
  font-family: "Poppins Local";
  src: url("../fonts/Poppins-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* COLOR — Brand */
  --ow-green:          #27EB65;
  --ow-green-soft:     #DFFFDD;
  --ow-mint:           #E7FFE5;
  --ow-green-200:      #B6F8C9;
  --ow-green-700:      #11B248;

  /* COLOR — Neutrals */
  --ow-ink:            #000000;
  --ow-slate-700:      #3C4F42;
  --ow-slate-600:      #40493F;
  --ow-slate-500:      #556154;
  --ow-slate-300:      #A6AFA8;
  --ow-slate-100:      #ECEFEE;
  --ow-white:          #FFFFFF;

  /* COLOR — Semantic surfaces */
  --ow-bg:             var(--ow-white);
  --ow-bg-muted:       var(--ow-mint);
  --ow-bg-inverse:     var(--ow-slate-600);
  --ow-bg-footer:      var(--ow-slate-700);

  --ow-fg:             var(--ow-ink);
  --ow-fg-body:        var(--ow-slate-500);
  --ow-fg-on-dark:     var(--ow-green-soft);
  --ow-fg-inverse:     var(--ow-white);

  --ow-accent:         var(--ow-green);
  --ow-accent-on-dark: var(--ow-green);

  --ow-border:         rgba(0, 0, 0, 0.10);
  --ow-border-on-dark: rgba(255, 255, 255, 0.50);

  /* COLOR — Status */
  --ow-success: #1FAE52;
  --ow-warning: #F5B946;
  --ow-danger:  #E2453B;
  --ow-info:    #2F8FD1;

  /* TYPE — Families */
  --ow-font-sans:    "Poppins", "Poppins Local", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ow-font-display: var(--ow-font-sans);
  --ow-font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* TYPE — Weights */
  --ow-weight-regular:  400;
  --ow-weight-medium:   500;
  --ow-weight-semibold: 600;
  --ow-weight-bold:     700;
  --ow-weight-black:    800;

  /* TYPE — Scale */
  --ow-text-xs:   0.75rem;
  --ow-text-sm:   0.875rem;
  --ow-text-base: 1rem;
  --ow-text-md:   1.125rem;
  --ow-text-lg:   1.5rem;
  --ow-text-xl:   2rem;
  --ow-text-2xl:  2.5rem;
  --ow-text-3xl:  3rem;
  --ow-text-4xl:  3.5rem;
  --ow-text-5xl:  4.5rem;
  --ow-text-mega: 9rem;

  /* TYPE — Line height */
  --ow-leading-tight:  1.1;
  --ow-leading-snug:   1.25;
  --ow-leading-normal: 1.5;
  --ow-leading-loose:  1.75;

  /* RADIUS */
  --ow-radius-sm:   4px;
  --ow-radius-md:   6px;
  --ow-radius-lg:   10px;
  --ow-radius-xl:   16px;
  --ow-radius-pill: 999px;

  /* SHADOW */
  --ow-shadow-xs:     0 1px 2px rgba(0, 0, 0, 0.06);
  --ow-shadow-sm:     0 2px 10px rgba(0, 0, 0, 0.075);
  --ow-shadow-md:     0 8px 24px rgba(0, 0, 0, 0.10);
  --ow-shadow-lg:     0 18px 40px rgba(0, 0, 0, 0.14);
  --ow-shadow-ribbon: 0 2px 3px rgba(136, 136, 136, 0.25);

  /* SPACING — 4px base scale */
  --ow-space-1:  4px;
  --ow-space-2:  8px;
  --ow-space-3:  12px;
  --ow-space-4:  16px;
  --ow-space-5:  24px;
  --ow-space-6:  32px;
  --ow-space-7:  48px;
  --ow-space-8:  64px;
  --ow-space-9:  96px;
  --ow-space-10: 128px;

  /* MOTION */
  --ow-ease-out: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --ow-ease-in:  cubic-bezier(0.55, 0.055, 0.675, 0.19);
  --ow-ease-std: cubic-bezier(0.4, 0, 0.2, 1);
  --ow-dur-fast: 160ms;
  --ow-dur-base: 320ms;
  --ow-dur-slow: 500ms;
}

/* ============================================================
   SEMANTIC ELEMENT RESET
   ============================================================ */

html { scroll-behavior: smooth; }

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

h1, h2, h5 { color: var(--ow-fg); font-weight: var(--ow-weight-semibold); line-height: var(--ow-leading-tight); }
h3, h4, h6 { color: var(--ow-fg-body); font-weight: var(--ow-weight-medium); line-height: var(--ow-leading-snug); }
p          { color: var(--ow-fg-body); line-height: var(--ow-leading-normal); }

h1 { font-size: var(--ow-text-4xl); }
h2 { font-size: var(--ow-text-3xl); }
h3 { font-size: var(--ow-text-2xl); }
h4 { font-size: var(--ow-text-xl); }
h5 { font-size: var(--ow-text-md); }
h6 { font-size: var(--ow-text-base); }

.ow-display {
  font-family: var(--ow-font-display);
  font-size: var(--ow-text-4xl);
  font-weight: var(--ow-weight-medium);
  color: var(--ow-fg);
  line-height: var(--ow-leading-tight);
}

.ow-numeral {
  font-size: var(--ow-text-mega);
  font-weight: var(--ow-weight-bold);
  color: var(--ow-ink);
  opacity: 0.2;
  line-height: 1;
}

.ow-word-accent { color: var(--ow-green); }
.ow-word-ink    { color: var(--ow-ink); }