/* ==========================================================================
   DGN Design System — Design Tokens
   Organic-editorial aesthetic for an environmental consultancy.
   Greens derived from the DGN logo: deep forest, leaf, and bright lime.
   ========================================================================== */

/* ----- Self-hosted typefaces (CSP font-src 'self') ----------------------- */

@font-face {
    font-family: "Fraunces";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/fraunces-400.woff2") format("woff2");
}
@font-face {
    font-family: "Fraunces";
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/fraunces-400-italic.woff2") format("woff2");
}
@font-face {
    font-family: "Fraunces";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/fraunces-600.woff2") format("woff2");
}
@font-face {
    font-family: "Fraunces";
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url("../fonts/fraunces-900.woff2") format("woff2");
}

/* Plus Jakarta Sans — soft, rounded display sans for headings & brand. */
@font-face {
    font-family: "Plus Jakarta Sans";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/jakarta-500.woff2") format("woff2");
}
@font-face {
    font-family: "Plus Jakarta Sans";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/jakarta-600.woff2") format("woff2");
}
@font-face {
    font-family: "Plus Jakarta Sans";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/jakarta-700.woff2") format("woff2");
}
@font-face {
    font-family: "Plus Jakarta Sans";
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url("../fonts/jakarta-800.woff2") format("woff2");
}

@font-face {
    font-family: "Hanken Grotesk";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/hanken-400.woff2") format("woff2");
}
@font-face {
    font-family: "Hanken Grotesk";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/hanken-500.woff2") format("woff2");
}
@font-face {
    font-family: "Hanken Grotesk";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/hanken-600.woff2") format("woff2");
}
@font-face {
    font-family: "Hanken Grotesk";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/hanken-700.woff2") format("woff2");
}

:root {
    /* ----- Brand greens (from logo.jpeg) ------------------------------- */
    --color-forest-900: #0f3d1a;   /* darkest — the "DGN" letterforms */
    --color-forest-800: #14532d;
    --color-forest-700: #1b6b34;
    --color-forest-600: #228b3c;   /* primary brand green */
    --color-leaf-500:   #2faa46;
    --color-leaf-400:   #4cbb5a;
    --color-lime-400:   #7cc63f;   /* bright leaf highlight */
    --color-lime-300:   #9ad452;
    --color-lime-200:   #c4e89a;

    /* ----- Warm organic neutrals --------------------------------------- */
    --color-bone:       #f7f6f0;   /* paper background */
    --color-bone-dark:  #eceadf;
    --color-clay-100:   #e3e0d4;
    --color-ink-900:    #12211a;   /* near-black, green-tinted */
    --color-ink-700:    #2c3b32;
    --color-ink-500:    #586a5f;
    --color-ink-300:    #8a988f;
    --color-white:      #ffffff;

    /* ----- Accent (earth/clay for warmth against green) ---------------- */
    --color-amber-500:  #d98a2b;
    --color-rust-500:   #b4561f;

    /* ----- Semantic ---------------------------------------------------- */
    --color-bg:           var(--color-bone);
    --color-surface:      var(--color-white);
    --color-surface-alt:  var(--color-bone-dark);
    --color-text:         var(--color-ink-900);
    --color-text-muted:   var(--color-ink-500);
    --color-primary:      var(--color-forest-600);
    --color-primary-dark: var(--color-forest-800);
    --color-accent:       var(--color-lime-400);
    --color-border:       var(--color-clay-100);

    --color-success: #2f8f43;
    --color-warning: #c98a16;
    --color-danger:  #c0392b;
    --color-info:    #2c7a7b;

    /* ----- Typography -------------------------------------------------- */
    /* Serif carries the editorial voice (public headings); the sans pair
       covers UI chrome and body copy. */
    --font-serif: "Fraunces", Georgia, "Times New Roman", serif;
    --font-display: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
    --font-body: "Hanken Grotesk", "Segoe UI", system-ui, sans-serif;
    --font-mono: "SFMono-Regular", "Cascadia Code", Consolas, monospace;

    /* Fluid type scale (clamp: min, preferred, max) */
    --text-xs:   0.78rem;
    --text-sm:   0.875rem;
    --text-base: 1rem;
    --text-lg:   1.125rem;
    --text-xl:   clamp(1.2rem, 1.08rem + 0.55vw, 1.4rem);
    --text-2xl:  clamp(1.4rem, 1.2rem + 0.9vw, 1.75rem);
    --text-3xl:  clamp(1.7rem, 1.4rem + 1.5vw, 2.35rem);
    --text-4xl:  clamp(2.05rem, 1.65rem + 2vw, 3.1rem);
    --text-5xl:  clamp(2.5rem, 1.9rem + 3vw, 4.2rem);

    --leading-tight:  1.08;
    --leading-snug:   1.28;
    --leading-normal: 1.6;
    --tracking-tight: -0.02em;
    --tracking-wide:  0.08em;
    --tracking-caps:  0.16em;

    /* ----- Spacing (8px base rhythm) ----------------------------------- */
    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-5:  1.5rem;
    --space-6:  2rem;
    --space-7:  3rem;
    --space-8:  4rem;
    --space-9:  6rem;
    --space-10: 8rem;

    /* ----- Radius ------------------------------------------------------ */
    --radius-sm:   6px;
    --radius-md:   12px;
    --radius-lg:   20px;
    --radius-xl:   32px;
    --radius-pill: 999px;

    /* ----- Shadows (soft, naturalistic) -------------------------------- */
    --shadow-sm: 0 1px 2px rgba(18, 33, 26, 0.06);
    --shadow-md: 0 8px 24px -12px rgba(18, 33, 26, 0.22);
    --shadow-lg: 0 24px 60px -28px rgba(15, 61, 26, 0.38);
    --shadow-lift: 0 18px 44px -18px rgba(34, 139, 60, 0.35), 0 4px 12px -6px rgba(18, 33, 26, 0.12);
    --shadow-ring: 0 0 0 3px rgba(124, 198, 63, 0.35);

    /* ----- Texture (inline SVG noise — CSP-safe, no extra request) ----- */
    --texture-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");

    /* ----- Layout ------------------------------------------------------ */
    --container-max: 1200px;
    --container-narrow: 760px;
    --container-pad: clamp(1.25rem, 4vw, 3rem);

    /* ----- Motion ------------------------------------------------------ */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --duration-fast: 140ms;
    --duration-base: 260ms;
    --duration-slow: 600ms;

    --z-header: 100;
    --z-modal: 1000;
}

/* Breakpoints are documented here for reference (used in media queries):
   sm 480px · md 768px · lg 1024px · xl 1280px */