/* ===========================================================================
   CHEMOULI — Design System
   Global entry point. Consumers link THIS file only.
   Import order matters: fonts → tokens → base.
   =========================================================================== */

/* ===========================================================================
   Nohemi — the single typeface of the Chemouli system.
   Geometric grotesque. Used across every weight from Thin to Black.
   =========================================================================== */

@font-face {
  font-family: "Nohemi";
  font-weight: 100;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/Nohemi-100.otf") format("opentype");
}
@font-face {
  font-family: "Nohemi";
  font-weight: 200;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/Nohemi-200.otf") format("opentype");
}
@font-face {
  font-family: "Nohemi";
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/Nohemi-300.otf") format("opentype");
}
@font-face {
  font-family: "Nohemi";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/Nohemi-400.otf") format("opentype");
}
@font-face {
  font-family: "Nohemi";
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/Nohemi-500.otf") format("opentype");
}
@font-face {
  font-family: "Nohemi";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/Nohemi-600.otf") format("opentype");
}
@font-face {
  font-family: "Nohemi";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/Nohemi-700.otf") format("opentype");
}
@font-face {
  font-family: "Nohemi";
  font-weight: 800;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/Nohemi-800.otf") format("opentype");
}
@font-face {
  font-family: "Nohemi";
  font-weight: 900;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/Nohemi-900.otf") format("opentype");
}

/* ===========================================================================
   COLOR — Chemouli
   A monochrome base (true black / pure white) charged with a family of five
   electric green→cyan→blue accents pulled directly from the brand palette.
   Use black & white for 90% of the surface. Accent is a punctuation mark,
   never a wash.
   =========================================================================== */

:root {
  /* --- Base / ink --------------------------------------------------------- */
  --color-black: #000000;
  --color-white: #ffffff;

  /* --- Neutral ramp (cool grey, derived from brand grey #BFBFBF) ---------- */
  --grey-50:  #f6f7f7;
  --grey-100: #ececed;
  --grey-200: #dededf;
  --grey-300: #bfbfbf;   /* brand grey — captions, disabled, hairlines */
  --grey-400: #9a9a9c;
  --grey-500: #6f7072;
  --grey-600: #4a4b4d;
  --grey-700: #2c2d2f;
  --grey-800: #19191b;
  --grey-900: #0c0c0d;

  /* --- Brand accents (the five palette swatches) -------------------------- */
  --accent-emerald: #12e185;   /* spring green — primary accent */
  --accent-green:   #12e03d;   /* vivid green */
  --accent-lime:    #33e012;   /* grass / lime */
  --accent-turquoise: #12e0ca; /* turquoise */
  --accent-blue:    #12b4e0;   /* sky / cyan-blue */

  /* tints for hover washes & quiet fills */
  --accent-emerald-soft: #d2f9e9;
  --accent-blue-soft:    #d2f1f9;

  /* --- Semantic aliases --------------------------------------------------- */
  --primary: var(--accent-emerald);
  --primary-ink: var(--color-black);          /* text that sits on --primary */

  --bg: var(--color-white);
  --bg-muted: var(--grey-50);
  --bg-inverse: var(--color-black);            /* big flat dark blocks */
  --bg-fill: var(--color-black);               /* solid colour fields */

  --surface: var(--color-white);
  --surface-muted: var(--grey-50);

  --text: var(--color-black);
  --text-muted: var(--grey-500);
  --text-caption: var(--grey-400);
  --text-inverse: var(--color-white);
  --text-inverse-muted: var(--grey-300);

  --border: var(--grey-200);
  --border-strong: var(--color-black);
  --border-inverse: rgba(255, 255, 255, 0.18);
  --hairline: var(--grey-200);

  --focus-ring: var(--accent-blue);

  /* --- Status ------------------------------------------------------------- */
  --success: var(--accent-emerald);
  --info:    var(--accent-blue);
  --warning: #e0a112;
  --danger:  #e0322a;
}

/* ===========================================================================
   TYPOGRAPHY — Chemouli
   One family: Nohemi. The scale is taken from the brand spec:
     H1 Bold 70 · H2 Bold 40 · H3 SemiBold 28 · Subtitle Medium 20
     Paragraph Light 16 · Button Medium 16 · Caption ExtraLight 14
   Headings are tight & confident; body is Light for air; labels/captions are
   uppercase with wide tracking — the "tech" register.
   =========================================================================== */

:root {
  --font-sans: "Nohemi", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font-sans);
  --font-body: var(--font-sans);

  /* --- Weights ---------------------------------------------- @kind font --- */
  --fw-thin: 100;       /* @kind font */
  --fw-extralight: 200; /* @kind font */
  --fw-light: 300;      /* @kind font */
  --fw-regular: 400;    /* @kind font */
  --fw-medium: 500;     /* @kind font */
  --fw-semibold: 600;   /* @kind font */
  --fw-bold: 700;       /* @kind font */
  --fw-extrabold: 800;  /* @kind font */
  --fw-black: 900;      /* @kind font */

  /* --- Type scale (px) ---------------------------------------------------- */
  --fs-hero: 120px;     /* oversized hero lockups (clamp in use) */
  --fs-h1: 70px;
  --fs-h2: 40px;
  --fs-h3: 28px;
  --fs-subtitle: 20px;
  --fs-body: 16px;
  --fs-button: 16px;
  --fs-caption: 14px;
  --fs-micro: 12px;

  /* --- Line heights ----------------------------------------- @kind other -- */
  --lh-tight: 1;        /* @kind other */
  --lh-snug: 1.1;       /* @kind other */
  --lh-normal: 1.5;     /* @kind other */
  --lh-relaxed: 1.65;   /* @kind other */

  /* --- Tracking --------------------------------------------- @kind other -- */
  --ls-tight: -0.02em;  /* @kind other */
  --ls-normal: 0;       /* @kind other */
  --ls-label: 0.08em;   /* @kind other */
  --ls-caption: 0.14em; /* @kind other */

  /* --- Semantic roles (font shorthand fragments) ------------ @kind font --- */
  --text-hero-weight: var(--fw-bold);      /* @kind font */
  --text-h1-weight: var(--fw-bold);        /* @kind font */
  --text-h2-weight: var(--fw-bold);        /* @kind font */
  --text-h3-weight: var(--fw-semibold);    /* @kind font */
  --text-subtitle-weight: var(--fw-medium); /* @kind font */
  --text-body-weight: var(--fw-light);          /* @kind font */
  --text-button-weight: var(--fw-medium);       /* @kind font */
  --text-caption-weight: var(--fw-extralight);  /* @kind font */
}

/* ===========================================================================
   SPACING & LAYOUT — Chemouli
   An 8px base grid. The system breathes: generous whitespace, large flat
   fields, square blocks. Section rhythm is intentionally large.
   =========================================================================== */

:root {
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --space-11: 160px;
  --space-12: 200px;

  /* Layout */
  --container-max: 1440px;
  --gutter: 32px;
  --gutter-lg: 64px;
  --section-y: 128px;       /* vertical breathing room between sections */

  /* Z-index ------------------------------------------------- @kind other -- */
  --z-base: 0;        /* @kind other */
  --z-sticky: 100;    /* @kind other */
  --z-overlay: 800;   /* @kind other */
  --z-modal: 900;     /* @kind other */
  --z-toast: 1000;    /* @kind other */
}

/* ===========================================================================
   EFFECTS — Chemouli
   Deliberately restrained. The brand is square and flat: NO drop shadows on
   blocks, NO rounded corners on layout surfaces. Radius exists only for the
   two places it earns its keep — the pill button and small avatar/tag chips.
   "Elevation" is expressed with hairline borders and flat colour fields,
   not shadows.
   =========================================================================== */

:root {
  /* --- Radius ------------------------------------------------------------- */
  --radius-none: 0px;        /* the default — cards, blocks, inputs, images */
  --radius-pill: 999px;      /* buttons & chips only */
  --radius-chip: 4px;        /* tags / small toggles, where a hint of soft helps */

  /* --- Borders ---------------------------------------------- @kind spacing  */
  --border-width: 1px;
  --border-width-strong: 2px;
  --border-hairline: 1px solid var(--hairline);
  --border-ink: 2px solid var(--color-black);

  /* --- Shadows (used very sparingly — only floating UI: menus, toasts) ---- */
  --shadow-none: none;
  --shadow-pop: 0 8px 28px rgba(0, 0, 0, 0.12);   /* dropdowns, dialogs only */

  /* --- Motion ----------------------------------------------- @kind other -- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);     /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-fast: 120ms;  /* @kind other */
  --dur: 200ms;       /* @kind other */
  --dur-slow: 420ms;  /* @kind other */

  /* Default interaction transition */
  --transition: color var(--dur) var(--ease-out),
                background-color var(--dur) var(--ease-out),
                border-color var(--dur) var(--ease-out),
                opacity var(--dur) var(--ease-out),
                transform var(--dur) var(--ease-out); /* @kind other */
}

/* ===========================================================================
   BASE — Chemouli
   Minimal global reset + the default document register. Sets Nohemi as the
   document face and pure black ink on white.
   =========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--fw-light);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--text);
  background: var(--bg);
}

/* Selection picks up the primary accent */
::selection {
  background: var(--accent-emerald);
  color: var(--color-black);
}

/* --- Type primitives ------------------------------------------------------ */
.ds-hero,
.ds-h1,
.ds-h2,
.ds-h3 {
  margin: 0;
  font-family: var(--font-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--text);
}
.ds-hero { font-size: clamp(56px, 9vw, var(--fs-hero)); font-weight: var(--fw-bold); }
.ds-h1   { font-size: clamp(40px, 5.2vw, var(--fs-h1)); font-weight: var(--fw-bold); }
.ds-h2   { font-size: var(--fs-h2); font-weight: var(--fw-bold); }
.ds-h3   { font-size: var(--fs-h3); font-weight: var(--fw-semibold); letter-spacing: var(--ls-normal); }

.ds-subtitle {
  margin: 0;
  font-size: var(--fs-subtitle);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-normal);
}
.ds-body {
  margin: 0;
  font-size: var(--fs-body);
  font-weight: var(--fw-light);
  line-height: var(--lh-normal);
}
.ds-caption {
  margin: 0;
  font-size: var(--fs-caption);
  font-weight: var(--fw-extralight);
  letter-spacing: var(--ls-caption);
  text-transform: uppercase;
  color: var(--text-caption);
}
.ds-label {
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}