@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;

    /* Display: Manrope — a corporate, open geometric sans whose Turkish
       diacritics (Ç Ğ İ Ş ı) sit cleanly at headline sizes. Body: Inter, the
       neutral screen face B2B readers already trust. Chosen side by side on
       the live hero against Inter Tight, Plus Jakarta Sans and IBM Plex Sans
       (DESIGN.md "Tipografi"). Labels and terminal readouts stay IBM Plex
       Mono, so the instrument-panel voice is unchanged. */
    --font-display: "Manrope", "Helvetica Neue", Arial, system-ui, sans-serif;
    --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

    --font-label:   "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

    --font-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

    --step--2: 0.694rem;
    --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.16em;
    --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);
  }
}