/*
 * AltaDent Design Tokens — CSS Custom Properties
 * Source of truth: /home/altadent/design/DESIGN.md
 * Generated: 2026-04-22
 *
 * USAGE:
 *   <link rel="stylesheet" href="https://web.altadentxela.com/design/altadent-tokens.css">
 *
 * All tokens are exposed as CSS custom properties on :root.
 * Any frontend that imports this file can reference the brand via var(--color-primary) etc.
 *
 * EDITING:
 * Do NOT hand-edit this file. Edit DESIGN.md and re-generate.
 * If you must hotfix, also update DESIGN.md to keep sources in sync.
 */

/* ============================================================
 * 1. Self-hosted brand fonts (Aktiv Grotesk Corp — licensed)
 * ============================================================
 * The font files are served from a sibling /fonts/ directory.
 * font-display: swap ensures readable text during font load.
 */

@font-face {
  font-family: 'Aktiv Grotesk Corp';
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url('./fonts/AktivGroteskCorp-Light.woff2') format('woff2'),
       url('./fonts/AktivGroteskCorp-Light.ttf') format('truetype');
}
@font-face {
  font-family: 'Aktiv Grotesk Corp';
  font-weight: 300;
  font-style: italic;
  font-display: swap;
  src: url('./fonts/AktivGroteskCorp-LightItalic.woff2') format('woff2'),
       url('./fonts/AktivGroteskCorp-LightItalic.ttf') format('truetype');
}
@font-face {
  font-family: 'Aktiv Grotesk Corp';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('./fonts/AktivGroteskCorp-Regular.woff2') format('woff2'),
       url('./fonts/AktivGroteskCorp-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Aktiv Grotesk Corp';
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  src: url('./fonts/AktivGroteskCorp-Italic.woff2') format('woff2'),
       url('./fonts/AktivGroteskCorp-Italic.ttf') format('truetype');
}
@font-face {
  font-family: 'Aktiv Grotesk Corp';
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url('./fonts/AktivGroteskCorp-Medium.woff2') format('woff2'),
       url('./fonts/AktivGroteskCorp-Medium.ttf') format('truetype');
}
@font-face {
  font-family: 'Aktiv Grotesk Corp';
  font-weight: 500;
  font-style: italic;
  font-display: swap;
  src: url('./fonts/AktivGroteskCorp-MediumItalic.woff2') format('woff2'),
       url('./fonts/AktivGroteskCorp-MediumItalic.ttf') format('truetype');
}
@font-face {
  font-family: 'Aktiv Grotesk Corp';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('./fonts/AktivGroteskCorp-Bold.woff2') format('woff2'),
       url('./fonts/AktivGroteskCorp-Bold.ttf') format('truetype');
}
@font-face {
  font-family: 'Aktiv Grotesk Corp';
  font-weight: 700;
  font-style: italic;
  font-display: swap;
  src: url('./fonts/AktivGroteskCorp-BoldItalic.woff2') format('woff2'),
       url('./fonts/AktivGroteskCorp-BoldItalic.ttf') format('truetype');
}

/* ============================================================
 * 2. Google Fonts — Fraunces (display) + DM Mono (technical)
 * ============================================================
 * Import so any page consuming this stylesheet picks them up automatically.
 * If the consuming page already imports these, the browser de-dupes.
 */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500;9..144,600;9..144,700&family=DM+Mono:wght@400;500&display=swap');

/* ============================================================
 * 3. Design tokens as CSS custom properties
 * ============================================================ */

:root {
  /* --- Colors: brand core (four official colors, 2024 rebranding) --- */
  --color-primary: #405D73;            /* Deep Teal — authority, CTAs, headlines */
  --color-secondary: #8A9A92;          /* Granite Green — institutional */
  --color-tertiary: #805D46;           /* Fudge — warmth, brand stripes */
  --color-neutral: #D2CFC4;            /* Frosted Almond — borders, warm neutral */

  /* --- Colors: UI extensions (derived for screen use) --- */
  --color-primary-dark: #2C4253;
  --color-secondary-dark: #6F8078;
  --color-secondary-deep: #4F5F58;
  --color-tertiary-light: #9C7559;
  --color-isotipo-ribbon: #E89878;     /* bright salmon from the logo interior */
  --color-neutral-light: #E8E6DD;
  --color-neutral-bg: #ECEAE5;         /* default app background */
  --color-surface: #FFFFFF;
  --color-surface-muted: #F7F5F2;

  /* --- Colors: text (ink) --- */
  --color-on-surface: #1C1C1C;
  --color-on-surface-muted: #3A3A3A;
  --color-on-surface-dim: #8A9A92;
  --color-header-ink: #2A2520;         /* dark header bar background */

  /* --- Colors: semantic status --- */
  --color-success: #2D6A4F;
  --color-warning: #E67E22;
  --color-error: #C62828;
  --color-info: #405D73;

  /* --- Colors: doctor tinting (domain-specific) --- */
  --color-doctor-jc: #405D73;
  --color-doctor-jc-bg: #E8EEF2;
  --color-doctor-granados: #805D46;
  --color-doctor-granados-bg: #F2EDE8;

  /* --- Font families --- */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Aktiv Grotesk Corp', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'DM Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* --- Type scale: display (Fraunces) --- */
  --type-display-xl-size: 4.875rem;
  --type-display-xl-weight: 300;
  --type-display-xl-line: 1.02;
  --type-display-xl-letter: -0.02em;

  --type-display-lg-size: 3rem;
  --type-display-lg-weight: 300;
  --type-display-lg-line: 1.05;
  --type-display-lg-letter: -0.02em;

  --type-display-md-size: 1.75rem;
  --type-display-md-weight: 300;
  --type-display-md-line: 1.1;
  --type-display-md-letter: -0.02em;

  /* --- Type scale: headlines (Aktiv Grotesk Bold) --- */
  --type-h1-size: 2rem;
  --type-h1-weight: 700;
  --type-h1-line: 1.15;
  --type-h1-letter: -0.01em;

  --type-h2-size: 1.5rem;
  --type-h2-weight: 700;
  --type-h2-line: 1.2;
  --type-h2-letter: -0.005em;

  --type-h3-size: 1.125rem;
  --type-h3-weight: 600;
  --type-h3-line: 1.3;

  /* --- Type scale: body --- */
  --type-body-lg-size: 1.125rem;
  --type-body-lg-weight: 400;
  --type-body-lg-line: 1.55;

  --type-body-md-size: 1rem;
  --type-body-md-weight: 400;
  --type-body-md-line: 1.55;

  --type-body-sm-size: 0.875rem;
  --type-body-sm-weight: 400;
  --type-body-sm-line: 1.5;

  /* --- Type scale: labels (Aktiv Grotesk Medium, often tracked) --- */
  --type-label-md-size: 0.8125rem;
  --type-label-md-weight: 500;
  --type-label-md-line: 1.3;

  --type-label-caps-size: 0.75rem;
  --type-label-caps-weight: 500;
  --type-label-caps-line: 1.3;
  --type-label-caps-letter: 0.08em;

  --type-label-caps-sm-size: 0.6875rem;
  --type-label-caps-sm-weight: 500;
  --type-label-caps-sm-line: 1.2;
  --type-label-caps-sm-letter: 0.06em;

  /* --- Type scale: mono (DM Mono) --- */
  --type-mono-md-size: 0.8125rem;
  --type-mono-md-weight: 400;
  --type-mono-md-line: 1.4;
  --type-mono-md-letter: 0.04em;

  --type-mono-sm-size: 0.6875rem;
  --type-mono-sm-weight: 400;
  --type-mono-sm-line: 1.3;
  --type-mono-sm-letter: 0.05em;

  /* --- Radii --- */
  --rounded-none: 0;
  --rounded-sm: 4px;
  --rounded-md: 8px;
  --rounded-lg: 12px;
  --rounded-xl: 16px;
  --rounded-full: 9999px;

  /* --- Spacing (8px scale + half-step) --- */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;
  --space-gutter: 24px;
  --space-page: 32px;

  /* --- Elevation (used sparingly — see Do's and Don'ts in DESIGN.md) --- */
  --shadow-none: none;
  --shadow-dropdown: 0 4px 12px rgba(0, 0, 0, 0.06);
  --shadow-modal: 0 8px 24px rgba(0, 0, 0, 0.08);
  --shadow-fab: 0 6px 16px rgba(128, 93, 70, 0.25);  /* fudge-tinted */
}

/* ============================================================
 * 4. Base element defaults (optional — consume à la carte)
 * ============================================================
 * These set sensible defaults so any page importing this file
 * looks AltaDent-correct without further styling. Existing
 * frontends that already have their own base styles will
 * override these; that is expected and fine.
 */

html {
  /* Modern root font size. Overridable per-project. */
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--type-body-md-size);
  line-height: var(--type-body-md-line);
  color: var(--color-on-surface);
  background: var(--color-neutral-bg);
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3 { text-wrap: balance; margin: 0; }
p { text-wrap: pretty; }

/* Accessible focus ring — brand spec. Do not remove. */
:focus-visible {
  outline: 2px solid var(--color-tertiary);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ============================================================
 * 5. Utility classes (optional — for drop-in brand consistency)
 * ============================================================ */

.ad-display-xl { font-family: var(--font-display); font-size: var(--type-display-xl-size); font-weight: var(--type-display-xl-weight); line-height: var(--type-display-xl-line); letter-spacing: var(--type-display-xl-letter); }
.ad-display-lg { font-family: var(--font-display); font-size: var(--type-display-lg-size); font-weight: var(--type-display-lg-weight); line-height: var(--type-display-lg-line); letter-spacing: var(--type-display-lg-letter); }
.ad-display-md { font-family: var(--font-display); font-size: var(--type-display-md-size); font-weight: var(--type-display-md-weight); line-height: var(--type-display-md-line); letter-spacing: var(--type-display-md-letter); }

.ad-h1 { font-family: var(--font-body); font-size: var(--type-h1-size); font-weight: var(--type-h1-weight); line-height: var(--type-h1-line); letter-spacing: var(--type-h1-letter); }
.ad-h2 { font-family: var(--font-body); font-size: var(--type-h2-size); font-weight: var(--type-h2-weight); line-height: var(--type-h2-line); letter-spacing: var(--type-h2-letter); }
.ad-h3 { font-family: var(--font-body); font-size: var(--type-h3-size); font-weight: var(--type-h3-weight); line-height: var(--type-h3-line); }

.ad-body-lg { font-size: var(--type-body-lg-size); line-height: var(--type-body-lg-line); }
.ad-body-md { font-size: var(--type-body-md-size); line-height: var(--type-body-md-line); }
.ad-body-sm { font-size: var(--type-body-sm-size); line-height: var(--type-body-sm-line); }

.ad-label-md { font-size: var(--type-label-md-size); font-weight: var(--type-label-md-weight); line-height: var(--type-label-md-line); }
.ad-label-caps { font-size: var(--type-label-caps-size); font-weight: var(--type-label-caps-weight); line-height: var(--type-label-caps-line); letter-spacing: var(--type-label-caps-letter); text-transform: uppercase; }
.ad-label-caps-sm { font-size: var(--type-label-caps-sm-size); font-weight: var(--type-label-caps-sm-weight); line-height: var(--type-label-caps-sm-line); letter-spacing: var(--type-label-caps-sm-letter); text-transform: uppercase; }

.ad-mono-md { font-family: var(--font-mono); font-size: var(--type-mono-md-size); font-weight: var(--type-mono-md-weight); line-height: var(--type-mono-md-line); letter-spacing: var(--type-mono-md-letter); }
.ad-mono-sm { font-family: var(--font-mono); font-size: var(--type-mono-sm-size); font-weight: var(--type-mono-sm-weight); line-height: var(--type-mono-sm-line); letter-spacing: var(--type-mono-sm-letter); }

/* --- Button primitives --- */
.ad-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  font-family: var(--font-body);
  font-size: var(--type-label-md-size);
  font-weight: var(--type-label-md-weight);
  line-height: 1;
  padding: 12px 20px;
  border-radius: var(--rounded-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  text-decoration: none;
}
.ad-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.ad-btn-primary { background: var(--color-primary); color: var(--color-surface); }
.ad-btn-primary:hover:not(:disabled) { background: var(--color-primary-dark); }

.ad-btn-secondary { background: var(--color-surface); color: var(--color-primary); border-color: var(--color-primary); }
.ad-btn-secondary:hover:not(:disabled) { background: var(--color-doctor-jc-bg); }

.ad-btn-tertiary { background: var(--color-tertiary); color: var(--color-surface); }
.ad-btn-tertiary:hover:not(:disabled) { background: var(--color-tertiary-light); }

.ad-btn-ghost { background: transparent; color: var(--color-on-surface); }
.ad-btn-ghost:hover:not(:disabled) { background: var(--color-neutral-light); }

/* --- Card primitive --- */
.ad-card {
  background: var(--color-surface);
  color: var(--color-on-surface);
  border: 1px solid var(--color-neutral);
  border-radius: var(--rounded-lg);
  padding: var(--space-lg);
}

/* --- Input primitive --- */
.ad-input {
  font-family: var(--font-body);
  font-size: var(--type-body-md-size);
  background: var(--color-surface);
  color: var(--color-on-surface);
  border: 1px solid var(--color-neutral);
  border-radius: var(--rounded-sm);
  padding: 10px 12px;
  width: 100%;
  transition: border-color 0.15s;
}
.ad-input:focus { border-color: var(--color-primary); outline: none; }

/* --- Status badge primitives --- */
.ad-badge {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--type-label-caps-sm-size);
  font-weight: var(--type-label-caps-sm-weight);
  line-height: 1;
  letter-spacing: var(--type-label-caps-sm-letter);
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: var(--rounded-sm);
  white-space: nowrap;
}
.ad-badge-scheduled { background: var(--color-neutral-light); color: var(--color-on-surface-muted); }
.ad-badge-confirmed { background: var(--color-doctor-jc-bg); color: var(--color-primary); }
.ad-badge-arrived   { background: #FFF8E1;                  color: #8A6400; }
.ad-badge-in-chair  { background: var(--color-doctor-granados-bg); color: var(--color-tertiary); }
.ad-badge-completed { background: #E8F5E9;                  color: var(--color-success); }
.ad-badge-no-show   { background: #FDEAEA;                  color: var(--color-error); }
.ad-badge-cancelled { background: #F5F0F0;                  color: var(--color-on-surface-dim); text-decoration: line-through; }

/* --- Doctor tag primitives --- */
.ad-doctor-jc       { background: var(--color-doctor-jc-bg); color: var(--color-doctor-jc); padding: 4px 10px; border-radius: var(--rounded-sm); font-size: var(--type-label-md-size); font-weight: var(--type-label-md-weight); }
.ad-doctor-granados { background: var(--color-doctor-granados-bg); color: var(--color-doctor-granados); padding: 4px 10px; border-radius: var(--rounded-sm); font-size: var(--type-label-md-size); font-weight: var(--type-label-md-weight); }

/* --- App header (dark warm-ink bar) --- */
.ad-app-header {
  background: var(--color-header-ink);
  color: var(--color-neutral-light);
  padding: 12px var(--space-xl);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
  height: 56px;
}

/* --- Fudge stripe brand device (for hero tops, section dividers) --- */
.ad-fudge-stripes {
  background: repeating-linear-gradient(
    0deg,
    var(--color-tertiary) 0 2px,
    transparent 2px 6px
  );
  height: 18px;
  width: 48px;
}
.ad-fudge-stripes-horizontal {
  background: repeating-linear-gradient(
    90deg,
    var(--color-tertiary) 0 3px,
    transparent 3px 8px
  );
  height: 48px;
  width: 100%;
}