@layer tokens, base, layout, components, utilities, blueprint;

@layer tokens {

  :root {

    color-scheme: light dark;

    --brand:            #77bc1f;
    --brand-hover:      #6aaa19;
    --brand-deep:       #457a0e;
    --on-brand:         #10160f;

    /* --data is the "line and link" colour, matched to the palette live on
       https://www.dgnteknoloji.com/ (dgnteknoloji.com/assets/_vmv1a7n8g/.../01-tokens.css).
       It is measured, not picked: #17494f on the #f4f5f2 paper reaches 9.12:1,
       so link text and the topology strokes sit far above 4.5:1. The brand lime
       stays a status colour (online / active PoP) and is never a link. */
    --data:             #17494f;
    --data-soft:        #e3edee;
    --tag-neutral:      #5a6878;
    --tag-neutral-soft: #ebeef2;
    --tag-accent:       #0e7490;
    --tag-accent-soft:  #dff3f7;

    --paper:            #f4f5f2;
    --surface:          #ffffff;
    --surface-2:        #eceee9;
    --surface-sunken:   #e7e9e3;

    --table-stripe:     #f7f8f5;
    --surface-deep:     #131a18;
    --on-deep:          #eef1ee;
    --on-deep-2:        #a9b3af;

    --rule:             #dde1da;
    --rule-strong:      #828b86;

    --ink:              #131a18;
    --ink-2:            #48534f;
    --ink-3:            #666f6b;

    --ok:               var(--brand-deep);
    --signal:           #9c6205;
    --signal-fill:      #efa92e;

    --gold:             #d9a520;
    --on-gold:          #1a1408;

    --footer-bg:        #77bc1f;
    --on-footer:        #10160f;
    --footer-rule:      rgb(16 22 15 / 0.24);
    --danger:           #b3261e;

    --font-display: "Manrope", "Helvetica Neue", Arial, system-ui, sans-serif;
    --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-label:   var(--font-display);
    --font-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

    --step--2: 0.75rem;
    --step--1: 0.833rem;
    --step-0:  1rem;
    --step-1:  1.125rem;
    --step-2:  clamp(1.383rem, 1.28rem + 0.51vw, 1.563rem);
    --step-3:  clamp(1.66rem, 1.47rem + 0.95vw, 1.953rem);
    --step-4:  clamp(1.99rem, 1.62rem + 1.85vw, 2.6rem);
    --step-5:  clamp(2.4rem, 1.7rem + 3.2vw, 4.25rem);

    --step-6:  clamp(2.6rem, 1.5rem + 4.4vw, 5.75rem);

    --leading-tight: 1.04;
    --leading-snug:  1.3;
    --leading-body:  1.62;

    /* Display tracking is pulled slightly left (-0.025em): Manrope is
       already compact, and the -0.045em that suited Space Grotesk fused
       word spaces at hero size ("Çeyrekasırlık"). Labels go the other way —
       wide-tracked mono, so a three-letter technical word still reads as a
       label rather than a heading. */
    --tracking-label: 0.04em;
    --tracking-display: -0.025em;
    --tracking-mono: 0.04em;
    --width-display: 100%;

    --space-3xs: 0.25rem;
    --space-2xs: 0.5rem;
    --space-xs:  0.75rem;
    --space-s:   1rem;
    --space-m:   1.5rem;
    --space-l:   2rem;
    --space-xl:  3rem;
    --space-2xl: 4.5rem;
    --space-3xl: 7rem;

    --container:      76rem;
    --container-wide: 84rem;
    --container-text: 40rem;
    --header-h:       6.5rem;

    --band-h:         clamp(9rem, 17vw, 14rem);
    --band-fade:      0.58;

    --radius-s:  2px;
    --radius-m:  4px;
    --radius-l:  6px;

    --shadow-s: 0 1px 2px rgb(19 26 24 / 0.05);
    --shadow-m: 0 1px 2px rgb(19 26 24 / 0.05), 0 6px 16px rgb(19 26 24 / 0.07);
    --shadow-l: 0 2px 6px rgb(19 26 24 / 0.07), 0 20px 44px rgb(19 26 24 / 0.12);

    --z-sticky: 100;
    --z-nav:    200;
    --z-banner: 300;
    --z-dialog: 400;

    --focus-ring: 2px solid var(--data);
    --focus-offset: 2px;

    --ease: cubic-bezier(0.2, 0.7, 0.3, 1);

    /* --- Motion ------------------------------------------------------------
       Three steps only. Entrances read as "settling into place"; faster
       looks like a glitch, slower gets in the way of reading. */
    --dur-fast:  140ms;
    --dur-base:  260ms;
    --dur-slow:  520ms;
    --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);

    /* --- Network topology motif -------------------------------------------
       The live-infrastructure map. Line and node are separate roles so the
       diagram stays legible on both grounds: --topo-line is the faint
       inter-PoP link, --topo-node the satellite, --topo-core the Bursa hub.

       The hub uses --brand-deep, not --brand: raw lime measures 2.33:1 on the
       white surface, which put the most important element in the diagram at
       the bottom of the 3:1 graphics floor while the same node reached 7.35:1
       in dark mode. --brand-deep is the same hue at a readable lightness and
       still carries the "online" reading. The background grid is left at 9% —
       it is a decorative texture, not a meaning-bearing graphic, so the 3:1
       floor does not apply to it. */
    --topo-line:        color-mix(in srgb, var(--data) 34%, transparent);
    /* 62% → 78%: at 62% the wide layout's link measured 3.40:1 on the live
       palette, the tightest graphics margin on the site. 78% lifts it to
       ~5.1:1 in light while keeping the line clearly subordinate to the nodes
       (satellite 9.13, core 4.75), so the map's hierarchy still reads. */
    --topo-line-strong: color-mix(in srgb, var(--data) 78%, transparent);
    --topo-node:        var(--data);
    --topo-core:        var(--brand-deep);
    --topo-core-halo:   color-mix(in srgb, var(--brand-deep) 82%, transparent);
    --topo-packet:      var(--brand-deep);
    --topo-peer:        color-mix(in srgb, var(--ink-3) 75%, transparent);
    --topo-grid:        color-mix(in srgb, var(--data) 9%, transparent);

    /* --- Blueprint surface -----------------------------------------------
       The paper-and-ink layer the reviewed references render in: a faint
       drafting grid, hairline panel borders, and a muted "fine print" ink.
       Grid opacity is deliberately below the 3:1 floor — it is background
       texture, never a meaning-bearing graphic. */
    --bp-grid:         color-mix(in srgb, var(--data) 7%, transparent);
    --bp-grid-strong:  color-mix(in srgb, var(--data) 13%, transparent);
    --bp-hair:         color-mix(in srgb, var(--ink) 14%, transparent);
    --bp-hair-soft:    color-mix(in srgb, var(--ink) 8%, transparent);
    --bp-panel:        var(--surface);
    --bp-panel-sunken: var(--surface-sunken);
    --bp-live:         var(--brand-deep);

  }

  :root:lang(en) {
    --step-6: clamp(2.15rem, 1.32rem + 3.23vw, 4.25rem);
  }

  :root[data-theme="dark"] {
    color-scheme: dark;

    --brand-hover:    #8bd12c;
    --brand-deep:     #9bd93e;
    --on-brand:       #10160f;

    --data:           #8cbcc4;
    --data-soft:      #16262a;
    --tag-neutral:      #d3d9e0;
    --tag-neutral-soft: #262e33;
    --tag-accent:       #67d4e8;
    --tag-accent-soft:  #11272c;

    --paper:          #0f1513;
    --surface:        #161d1a;
    --surface-2:      #1e2724;
    --surface-sunken: #0a100e;

    --table-stripe:   #111715;
    --surface-deep:   #0a100e;
    --on-deep:        #eef1ee;
    --on-deep-2:      #a9b3af;

    --rule:           #28322e;
    --rule-strong:    #5f6c66;

    --ink:            #e9eeeb;
    --ink-2:          #a7b2ad;
    --ink-3:          #7d8884;

    --signal:         #efa92e;
    --gold:           #e8b73c;

    --ctaband-mark:   #ffffff;

    --footer-bg:      #0a100e;
    --on-footer:      #eef1ee;
    --footer-rule:    rgb(255 255 255 / 0.16);
    --danger:         #ef6a5f;

    --shadow-s: 0 1px 2px rgb(0 0 0 / 0.4);
    --shadow-m: 0 1px 2px rgb(0 0 0 / 0.4), 0 6px 16px rgb(0 0 0 / 0.35);
    --shadow-l: 0 2px 6px rgb(0 0 0 / 0.5), 0 20px 44px rgb(0 0 0 / 0.45);

    --focus-ring: 2px solid var(--brand-deep);

    /* Dark blueprint: the grid and hairlines invert to ink-on-slate rather
       than sharing the light values, so the drafting texture stays present
       in both themes instead of disappearing into the dark surfaces. */
    --bp-grid:         color-mix(in srgb, var(--data) 10%, transparent);
    --bp-grid-strong:  color-mix(in srgb, var(--data) 18%, transparent);
    --bp-hair:         color-mix(in srgb, var(--on-deep) 16%, transparent);
    --bp-hair-soft:    color-mix(in srgb, var(--on-deep) 9%, transparent);
  }
}