/* ─────────────────────────────────────────────────────────────
   LanDocs — Design Tokens
   Colors, type, spacing, and semantic styles.
   Import this once and use the CSS variables anywhere.
   ───────────────────────────────────────────────────────────── */

:root {
    /* ── Brand / accent ──────────────────────────────────── */
    --accent:           #0066ff;   /* marketing CTA blue */
    --accent-hover:     #0052cc;
    --accent-soft:      #e6f0ff;

    /* ── Neutrals (canvas → text) ────────────────────────── */
    --bg:               #ffffff;
    --bg-soft:          #fafafa;
    --bg-muted:         #f5f5f5;   /* card / hover */
    --bg-sunken:        #f0f0f0;   /* pressed / kbd */
    --border:           #e0e0e0;   /* hairlines */
    --border-strong:    #cccccc;   /* buttons, inputs */
    --border-focus:     #999999;

    --fg:               #111111;   /* primary text */
    --fg-1:             #333333;
    --fg-2:             #555555;   /* secondary */
    --fg-3:             #777777;   /* tertiary / labels */
    --fg-4:             #888888;   /* meta / hints */
    --fg-5:             #aaaaaa;   /* placeholder */

    /* ── Dark CTA (app modals, hero buttons) ─────────────── */
    --ink:              #0a0a0a;
    --ink-hover:        #333333;

    /* ── Device-type palette (the app's signature colors) ── */
    --switch-fg:        #00838f;   /* teal */
    --switch-bg:        #e0f7fa;
    --router-fg:        #e65100;   /* orange */
    --router-bg:        #fff3e0;
    --server-fg:        #3949ab;   /* indigo */
    --server-bg:        #e8eaf6;
    --pc-fg:            #558b2f;   /* green */
    --pc-bg:            #f1f8e9;
    --custom-fg:        #555555;
    --custom-bg:        #f5f5f5;

    /* AI / generator accent (used on the AI Prompt button) */
    --ai-fg:            #1a237e;
    --ai-hover:         #283593;

    /* ── Status / semantic ───────────────────────────────── */
    --status-up-fg:     #2e7d32;
    --status-up-bg:     #f1f8e9;
    --status-up-bd:     #81c784;
    --status-down-fg:   #b71c1c;
    --status-down-bg:   #ffebee;
    --status-down-bd:   #ef9a9a;
    --danger-fg:        #c62828;
    --danger-bd:        #e57373;
    --warn-bg:          #fff8e1;
    --warn-bd:          #ffe082;
    --warn-fg:          #5d4037;

    /* Selection ink (rubber-band) */
    --select-fg:        #1565c0;
    --select-bg:        rgba(21,101,192,0.07);

    /* ── Typography ──────────────────────────────────────── */
    --font-sans:        'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-system:      system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-mono:        'JetBrains Mono', 'Courier New', ui-monospace, monospace;

    /* In-app type scale (utility / dense UI) */
    --t-app-meta:       10px;       /* labels, shortcut keys */
    --t-app-sub:        11px;       /* sub-labels, badges */
    --t-app-body:       12px;       /* default body */
    --t-app-base:       13px;       /* inputs */
    --t-app-h:          14px;       /* modal / panel headings */

    /* Marketing / landing type scale */
    --t-display:        80px;
    --t-h1:             56px;
    --t-h2:             36px;
    --t-h3:             22px;
    --t-lead:           19px;
    --t-body:           16px;
    --t-small:          13px;
    --t-micro:          12px;

    --lh-tight:         1.05;
    --lh-snug:          1.25;
    --lh-normal:        1.5;
    --lh-loose:         1.65;

    --tracking-caps:    0.06em;     /* UI section labels */
    --tracking-tight:   -0.02em;    /* large display */

    /* ── Spacing (4-px 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-9:  96px;
    --s-10: 128px;

    /* ── Radii (utility-first; nothing is very round) ────── */
    --r-1:  2px;       /* default — buttons, cards, inputs */
    --r-2:  3px;       /* search box, device cards */
    --r-3:  6px;       /* landing-page cards */
    --r-4:  10px;      /* landing-page big cards */
    --r-pill: 999px;   /* tag chips */

    /* ── Shadows (almost none; this brand is flat) ───────── */
    --shadow-none:      none;
    --shadow-tooltip:   0 2px 6px rgba(0,0,0,0.25);
    --shadow-popover:   0 2px 6px rgba(0,0,0,0.12);
    --shadow-modal:     0 4px 20px rgba(0,0,0,0.15);
    --shadow-card:      0 1px 2px rgba(0,0,0,0.04);
    --shadow-lift:      0 8px 32px rgba(0,0,0,0.08);   /* hero browser frame */

    /* Borders */
    --bw:               1px;
    --bw-strong:        1.5px;

    /* Motion */
    --ease:             cubic-bezier(0.2, 0, 0.2, 1);
    --t-fast:           0.08s;
    --t-quick:          0.12s;
    --t-base:           0.18s;
    --t-slow:           0.32s;
}

/* ─────────────────────────────────────────────────────────────
   Base reset (opt-in — apply by adding class="landocs")
   ───────────────────────────────────────────────────────────── */

.landocs {
    font-family: var(--font-sans);
    color: var(--fg);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ─────────────────────────────────────────────────────────────
   Semantic typography classes
   ───────────────────────────────────────────────────────────── */

.ld-display {
    font-family: var(--font-sans);
    font-size: var(--t-display);
    line-height: var(--lh-tight);
    letter-spacing: var(--tracking-tight);
    font-weight: 600;
    color: var(--ink);
}
.ld-h1 {
    font-size: var(--t-h1);
    line-height: var(--lh-tight);
    letter-spacing: var(--tracking-tight);
    font-weight: 600;
    color: var(--ink);
}
.ld-h2 {
    font-size: var(--t-h2);
    line-height: var(--lh-snug);
    letter-spacing: -0.01em;
    font-weight: 600;
    color: var(--ink);
}
.ld-h3 {
    font-size: var(--t-h3);
    line-height: var(--lh-snug);
    font-weight: 600;
    color: var(--ink);
}
.ld-lead {
    font-size: var(--t-lead);
    line-height: var(--lh-loose);
    color: var(--fg-2);
    font-weight: 400;
}
.ld-body {
    font-size: var(--t-body);
    line-height: var(--lh-loose);
    color: var(--fg-1);
}
.ld-small  { font-size: var(--t-small); color: var(--fg-2); }
.ld-micro  { font-size: var(--t-micro); color: var(--fg-3); }

.ld-eyebrow {
    font-size: var(--t-app-meta);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    color: var(--fg-3);
}

.ld-mono { font-family: var(--font-mono); }

/* App-density typography (used inside the diagramming app) */
.ld-app-label {
    font-family: var(--font-system);
    font-size: var(--t-app-meta);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    color: var(--fg-3);
}
.ld-app-body {
    font-family: var(--font-system);
    font-size: var(--t-app-body);
    color: var(--fg);
}
.ld-app-sub {
    font-family: var(--font-system);
    font-size: var(--t-app-meta);
    color: var(--fg-4);
}

/* ─────────────────────────────────────────────────────────────
   Semantic component primitives
   ───────────────────────────────────────────────────────────── */

.ld-btn {
    font: 500 var(--t-app-body) var(--font-sans);
    color: var(--fg);
    background: var(--bg);
    border: var(--bw) solid var(--border-strong);
    padding: var(--s-1) var(--s-3);
    border-radius: var(--r-1);
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--t-fast) var(--ease);
}
.ld-btn:hover  { background: var(--bg-muted); }
.ld-btn:active { background: var(--bg-sunken); }

.ld-btn-primary {
    background: var(--ink);
    color: #fff;
    border-color: var(--ink);
}
.ld-btn-primary:hover { background: var(--ink-hover); border-color: var(--ink-hover); }

.ld-btn-accent {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}
.ld-btn-accent:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

.ld-kbd {
    font-family: var(--font-system);
    font-size: var(--t-app-meta);
    color: var(--fg-1);
    background: var(--bg-sunken);
    border: var(--bw) solid var(--border-strong);
    border-radius: var(--r-1);
    padding: 1px 4px;
    white-space: nowrap;
}

.ld-chip {
    display: inline-block;
    font-size: var(--t-app-meta);
    padding: 2px 7px;
    border: var(--bw) solid var(--border-strong);
    border-radius: var(--r-pill);
    background: var(--bg-muted);
    color: var(--fg-2);
}