/* =========================================================================
   Common — Colors & Type
   Foundational tokens. All semantic styles below resolve to these.
   ========================================================================= */

/* ---- Webfonts ---------------------------------------------------------- */
/* Display + Body: DM Sans (local TTF, full family).
   Accent:        Instrument Serif (local TTF, regular + italic).
   Mono:          JetBrains Mono (Google Fonts). */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap');

@font-face { font-family: "DM Sans"; src: url("fonts/DMSans-Thin.ttf") format("truetype");          font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("fonts/DMSans-ThinItalic.ttf") format("truetype");    font-weight: 100; font-style: italic; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("fonts/DMSans-ExtraLight.ttf") format("truetype");    font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("fonts/DMSans-ExtraLightItalic.ttf") format("truetype"); font-weight: 200; font-style: italic; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("fonts/DMSans-Light.ttf") format("truetype");         font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("fonts/DMSans-LightItalic.ttf") format("truetype");   font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("fonts/DMSans-Regular.ttf") format("truetype");       font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("fonts/DMSans-Italic.ttf") format("truetype");        font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("fonts/DMSans-Medium.ttf") format("truetype");        font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("fonts/DMSans-MediumItalic.ttf") format("truetype");  font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("fonts/DMSans-SemiBold.ttf") format("truetype");      font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("fonts/DMSans-SemiBoldItalic.ttf") format("truetype");font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("fonts/DMSans-Bold.ttf") format("truetype");          font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("fonts/DMSans-BoldItalic.ttf") format("truetype");    font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("fonts/DMSans-ExtraBold.ttf") format("truetype");     font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("fonts/DMSans-ExtraBoldItalic.ttf") format("truetype"); font-weight: 800; font-style: italic; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("fonts/DMSans-Black.ttf") format("truetype");         font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("fonts/DMSans-BlackItalic.ttf") format("truetype");   font-weight: 900; font-style: italic; font-display: swap; }

@font-face { font-family: "Instrument Serif"; src: url("fonts/InstrumentSerif-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("fonts/InstrumentSerif-Italic.ttf") format("truetype");  font-weight: 400; font-style: italic; font-display: swap; }

:root {
  /* =====================================================================
     COLORS — Brand
     ===================================================================== */
  /* Brand spec: Obsidian / Glacier White / Deep Teal */
  --brand-teal:         #2E6B6B;   /* Deep Teal — primary brand stamp */
  --brand-teal-bright:  #3A8585;   /* hover */
  --brand-teal-deep:    #1F5252;   /* pressed */
  --obsidian:           #0D0D0D;   /* near-black */
  --glacier:            #F0F2F2;   /* warm-cool off-white */
  --on-brand:           #ffffff;
  /* Aliases */
  --brand-green:        #2E6B6B;
  --brand-green-bright: #3A8585;
  --brand-green-deep:   #1F5252;
  --brand-teal-stamp:   #2E6B6B;
  --brand-teal-bright-2:#3A8585;

  /* =====================================================================
     COLORS — Canvas (two-mode rhythm)
     ===================================================================== */
  --canvas-cream:       #F0F2F2;   /* Glacier White — default page canvas */
  --canvas-ink:         #0D0D0D;   /* Obsidian — dark storytelling canvas */
  --canvas-white:       #ffffff;   /* pure-white catalogue surfaces */

  --surface-soft:       #E2E5E5;   /* inset tiles on glacier */
  --surface-card:       #ffffff;
  --surface-deep:       #050505;   /* inset tile on obsidian */
  --surface-elevated:   #1A1A1A;   /* lifted card on obsidian */

  /* =====================================================================
     COLORS — Text (foreground)
     ===================================================================== */
  --fg-1:               #0D0D0D;   /* Obsidian — primary text */
  --fg-2:               #2A2A2A;   /* secondary body */
  --fg-3:               #555858;   /* supporting text */
  --fg-4:               #828585;   /* metadata, captions */
  --fg-5:               #B5B8B8;   /* disabled */
  --on-dark-1:          #ffffff;
  --on-dark-2:          rgba(255, 255, 255, 0.78);
  --on-dark-3:          rgba(255, 255, 255, 0.56);

  /* =====================================================================
     COLORS — Hairline / divider
     ===================================================================== */
  --hairline:           #D5D8D8;   /* 1px divider on glacier */
  --hairline-strong:    #0D0D0D;
  --hairline-white:     #E6E9E9;
  --hairline-dark:      rgba(255, 255, 255, 0.10);

  /* =====================================================================
     COLORS — Accent (used inside illustrations & data viz, NOT buttons)
     ===================================================================== */
  --accent-clay:        #c45a3b;   /* warm terracotta — for charts/illustration */
  --accent-amber:       #d99a2b;   /* caution / pending */
  --accent-sky:         #2f6fa8;   /* informational */
  --accent-rose:        #c0476a;   /* alerts in product mockups */
  --accent-sage:        #7a9e7e;   /* secondary green tone */
  --accent-plum:        #6b4a78;   /* rare premium accent */

  /* =====================================================================
     COLORS — Semantic state
     ===================================================================== */
  --success:            #2E6B6B;   /* same family as brand */
  --success-bg:         #DDE9E9;
  --warning:            #b97315;
  --warning-bg:         #fbeed5;
  --danger:             #b3322f;
  --danger-bg:          #f8dcdb;
  --info:              var(--accent-sky);
  --info-bg:            #e1ecf6;

  /* =====================================================================
     COLORS — Link
     ===================================================================== */
  --link:               #2E6B6B;
  --link-hover:         #1F5252;
  --link-on-dark:       #8FCBCB;

  /* =====================================================================
     TYPE — Family
     ===================================================================== */
  /* Brand-spec families: DM Sans (display, -30 letter-spacing) + Instrument Serif (accent) */
  --font-display: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif:   "Instrument Serif", "Times New Roman", Georgia, serif;
  --font-body:    "DM Sans", "Inter", system-ui, -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* =====================================================================
     TYPE — Scale (raw)
     ===================================================================== */
  --fs-display-xxl: 128px;
  --fs-display-xl:  80px;
  --fs-display-lg:  56px;
  --fs-display-md:  40px;
  --fs-h1:          48px;
  --fs-h2:          32px;
  --fs-h3:          24px;
  --fs-h4:          20px;
  --fs-body-lg:     18px;
  --fs-body:        16px;
  --fs-body-sm:     14px;
  --fs-caption:     13px;
  --fs-overline:    12px;

  --lh-tight:       1.0;
  --lh-snug:        1.15;
  --lh-normal:      1.5;
  --lh-loose:       1.6;

  --tracking-display-xxl: -0.025em;
  --tracking-display:     -0.02em;
  --tracking-heading:     -0.012em;
  --tracking-body:        0.005em;
  --tracking-overline:    0.10em;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold: 600;
  --fw-bold:    700;

  /* =====================================================================
     SHAPE
     ===================================================================== */
  --radius-none:  0px;
  --radius-sm:    8px;
  --radius-md:    12px;
  --radius-lg:    20px;
  --radius-xl:    28px;
  --radius-full:  9999px;

  /* =====================================================================
     SPACING (4-base)
     ===================================================================== */
  --s-1:   4px;
  --s-2:   8px;
  --s-3:   12px;
  --s-4:   16px;
  --s-5:   24px;
  --s-6:   32px;
  --s-7:   48px;
  --s-8:   64px;
  --s-block:   80px;
  --s-section: 96px;
  --s-band:    128px;

  /* =====================================================================
     ELEVATION (used sparingly — Common's surfaces lean flat)
     ===================================================================== */
  --shadow-1: 0 1px 2px rgba(20, 33, 28, 0.06);
  --shadow-2: 0 4px 16px rgba(20, 33, 28, 0.08);
  --shadow-3: 0 12px 40px rgba(20, 33, 28, 0.12);
  --shadow-focus: 0 0 0 3px rgba(46, 107, 107, 0.32);

  /* =====================================================================
     MOTION
     ===================================================================== */
  --ease-out:   cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.5, 0, 0.2, 1);
  --dur-fast:   140ms;
  --dur-base:   220ms;
  --dur-slow:   420ms;
}

/* =========================================================================
   SEMANTIC TYPE STYLES
   Apply these classes (or @extend in your own CSS) — don't reach for raw vars.
   ========================================================================= */

.t-display-xxl {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: clamp(64px, 9vw, var(--fs-display-xxl));
  line-height: var(--lh-tight);
  letter-spacing: -0.03em; /* DM Sans tight per brand */
}
.t-display-xl {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: clamp(48px, 6vw, var(--fs-display-xl));
  line-height: var(--lh-tight);
  letter-spacing: -0.03em;
}
.t-serif {
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: italic;
}
.t-display-lg {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-display-lg);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-display);
}
.t-display-md {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-display-md);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-display);
}
.t-h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-h1);
  line-height: 1.12;
  letter-spacing: var(--tracking-heading);
}
.t-h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-h2);
  line-height: 1.2;
  letter-spacing: var(--tracking-heading);
}
.t-h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-h3);
  line-height: 1.3;
  letter-spacing: 0;
}
.t-h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-h4);
  line-height: 1.4;
  letter-spacing: 0;
}
.t-body-lg {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-loose);
  letter-spacing: var(--tracking-body);
}
.t-body {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  letter-spacing: var(--tracking-body);
}
.t-body-bold {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  letter-spacing: var(--tracking-body);
}
.t-body-sm {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body-sm);
  line-height: 1.45;
}
.t-caption {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-caption);
  line-height: 1.4;
  color: var(--fg-3);
}
.t-overline {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-overline);
  line-height: 1.2;
  letter-spacing: var(--tracking-overline);
  text-transform: uppercase;
  color: var(--fg-3);
}
.t-mono {
  font-family: var(--font-mono);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body-sm);
  line-height: 1.5;
}

/* =========================================================================
   GLOBAL DEFAULTS — opt-in via .common-canvas wrapper to avoid leaking.
   ========================================================================= */
.common-canvas {
  background: var(--canvas-cream);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
.common-canvas.dark {
  background: var(--canvas-ink);
  color: var(--on-dark-1);
}
.common-canvas h1, .common-canvas h2, .common-canvas h3, .common-canvas h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  margin: 0;
}
.common-canvas a { color: var(--link); text-decoration: none; }
.common-canvas a:hover { color: var(--link-hover); text-decoration: underline; text-underline-offset: 3px; }
.common-canvas.dark a { color: var(--link-on-dark); }