/* ============================================================
   SendPhisher Design System — Design tokens
   colors + typography + spacing + effects (fonts are in ds-fonts.css).
   Source of truth mirrored from docs/SendPhisher Design System/tokens/.
   Loaded site-wide via base.html. Additive: existing base.html :root
   tokens (spacing/radius/shadow/transition) share the same values.
   ============================================================ */
/* ============================================================
   SendPhisher — Color tokens
   Brand DNA: a pink→violet "phish" gradient (the swan-S mark),
   an indigo/periwinkle interactive color for navigation & focus,
   on a calm off-white canvas of floating white cards.
   ============================================================ */
:root {
    /* ---- Brand: magenta → violet phish gradient ------------- */
    --brand-pink:        #e5147e;  /* logo top stroke            */
    --brand-magenta:     #db2777;  /* primary brand / CTA        */
    --brand-magenta-ink: #cc0a87;  /* deep magenta (report v1.1) */
    --brand-fuchsia:     #9d1bb8;  /* gradient midpoint          */
    --brand-violet:      #7c3aed;  /* logo lower swoosh          */
    --brand-grad: linear-gradient(135deg, #db2777 0%, #7c3aed 100%); /* @kind color */
    --brand-grad-rich: linear-gradient(120deg, #e5147e 0%, #9d1bb8 52%, #7c3aed 100%); /* @kind color */

    /* ---- Interactive: indigo / periwinkle ------------------- */
    --indigo:        #667eea;  /* nav, links, focus              */
    --indigo-deep:   #5a67d8;  /* hover / pressed                */
    --indigo-royal:  #764ba2;  /* gradient partner for text      */
    --purple:        #8b5cf6;
    --purple-bright: #a855f7;
    --indigo-grad: linear-gradient(135deg, #667eea 0%, #764ba2 100%); /* @kind color */

    /* ---- Ink & text ---------------------------------------- */
    --ink:        #16191f;  /* darkest — headings, dark surfaces */
    --ink-900:    #1f2937;
    --text-1:     #374151;  /* primary body                     */
    --text-2:     #4b5563;  /* secondary                        */
    --text-3:     #6b7280;  /* muted / labels                   */
    --text-4:     #9ca3af;  /* faint / placeholder              */
    --text-5:     #aeb3bf;  /* faintest                         */

    /* ---- Surfaces ------------------------------------------ */
    --canvas:        #f8f9fa;  /* app background                */
    --surface:       #ffffff;  /* cards, panels                 */
    --surface-sunk:  #fafafa;  /* card header / footer          */
    --surface-soft:  #f7f8fa;  /* subtle fill                   */
    --surface-dark:  #16191f;  /* dark hero / footer            */
    --surface-dark-2:#212529;  /* footer (bootstrap dark)       */

    /* ---- Tint washes (brand at low alpha) ------------------ */
    --indigo-wash:   rgba(102, 126, 234, 0.06);
    --indigo-wash-2: rgba(102, 126, 234, 0.10);
    --indigo-ring:   rgba(102, 126, 234, 0.15);
    --magenta-wash:  rgba(219, 39, 119, 0.08);

    /* ---- Borders ------------------------------------------- */
    --border:        #e5e7eb;
    --border-strong: #d6d9df;
    --border-faint:  #f0f0f0;

    /* ---- Semantic ------------------------------------------ */
    --success:     #2f8f5b;  --success-bg: #e9f6ee;  --success-bright: #10b981;
    --danger:      #dc3545;  --danger-bg:  #fbeaea;  --danger-deep:   #c0392b;
    --warning:     #c2700c;  --warning-bg: #fbf0e2;  --warning-bright:#ffc107;
    --info:        #0d6efd;  --info-bg:    #e8eff7;  --info-teal:     #17a2b8;

    /* ---- Risk scale (domain semantic) ---------------------- */
    --risk-high:   #c0392b;  --risk-high-bg:   #fbeaea;
    --risk-medium: #c2700c;  --risk-medium-bg: #fbf0e2;
    --risk-low:    #2f8f5b;  --risk-low-bg:    #e9f6ee;
    --risk-none:   #6b7280;  --risk-none-bg:   #eef0f3;

    /* ---- Semantic aliases ---------------------------------- */
    --color-text:        var(--text-1);
    --color-text-muted:  var(--text-3);
    --color-heading:     var(--ink-900);
    --color-link:        var(--indigo);
    --color-bg:          var(--canvas);
    --surface-card:      var(--surface);
    --color-border:      var(--border);
    --color-primary:     var(--brand-magenta);
    --color-accent:      var(--indigo);
}
/* ============================================================
   SendPhisher — Typography tokens
   Noto Sans TC for all UI text (CJK-first); a mono face carries
   numerics, IDs, tracker codes and tabular data.
   ============================================================ */
:root {
    --font-sans: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei",
                 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-mono: "Noto Sans Mono", "DejaVu Sans Mono", ui-monospace,
                 SFMono-Regular, Menlo, monospace;

    /* Semantic faces */
    --font-body:    var(--font-sans);
    --font-heading: var(--font-sans);
    --font-data:    var(--font-mono);

    /* Type scale (rem) */
    --text-2xs: 0.6875rem;  /* 11px — eyebrow / micro labels   */
    --text-xs:  0.75rem;    /* 12px — captions, table headers  */
    --text-sm:  0.8125rem;  /* 13px — dense UI text            */
    --text-base:0.9375rem;  /* 15px — body / controls          */
    --text-md:  1rem;       /* 16px                            */
    --text-lg:  1.125rem;   /* 18px — card titles              */
    --text-xl:  1.375rem;   /* 22px — section heads            */
    --text-2xl: 1.75rem;    /* 28px — stat numbers             */
    --text-3xl: 2.25rem;    /* 36px — page hero                */
    --text-4xl: 3rem;       /* 48px — display                  */

    /* Weights */
    --fw-regular: 400;  /* @kind font */
    --fw-medium:  500;  /* @kind font */
    --fw-semibold:600;  /* @kind font */
    --fw-bold:    700;  /* @kind font */
    --fw-extra:   800;  /* @kind font */

    /* Line height */
    --lh-tight:   1.2;  /* @kind font */
    --lh-snug:    1.4;  /* @kind font */
    --lh-normal:  1.6;  /* @kind font */
    --lh-relaxed: 1.9;  /* @kind font */

    /* Tracking */
    --tracking-tight:  -0.01em; /* @kind font */
    --tracking-normal: 0;       /* @kind font */
    --tracking-wide:   0.03em;  /* @kind font */
    --tracking-caps:   0.08em;  /* @kind font */
}
/* ============================================================
   SendPhisher — Spacing, radius & layout tokens
   ============================================================ */
:root {
    /* Spacing scale */
    --space-xs:  0.25rem;  /* 4px  */
    --space-sm:  0.5rem;   /* 8px  */
    --space-md:  1rem;     /* 16px */
    --space-lg:  1.5rem;   /* 24px */
    --space-xl:  2rem;     /* 32px */
    --space-2xl: 2.5rem;   /* 40px */
    --space-3xl: 3.5rem;   /* 56px */

    /* Legacy aliases (match base.html) */
    --spacing-xs: var(--space-xs);
    --spacing-sm: var(--space-sm);
    --spacing-md: var(--space-md);
    --spacing-lg: var(--space-lg);
    --spacing-xl: var(--space-xl);
    --spacing-2xl: var(--space-2xl);

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

    /* Layout */
    --container-pad: 20px;    /* gutter around floating cards    */
    --content-pad:   1.5rem;
    --sidebar-w:     280px;
    --sidebar-min:   200px;
    --sidebar-max:   500px;
    --header-h:      72px;
}
/* ============================================================
   SendPhisher — Elevation, motion & border tokens
   Soft, low-contrast shadows; cards lift 1–4px on hover.
   ============================================================ */
:root {
    /* Shadow ramp */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.10);
    --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.12);
    --shadow-xl: 0 8px 24px rgba(0, 0, 0, 0.15);

    /* Brand-tinted glow (for primary CTAs) */
    --glow-magenta: 0 5px 15px rgba(219, 39, 119, 0.30);
    --glow-indigo:  0 4px 12px rgba(102, 126, 234, 0.20);

    /* Focus ring */
    --ring-indigo:  0 0 0 3px rgba(102, 126, 234, 0.15);
    --ring-magenta: 0 0 0 3px rgba(219, 39, 119, 0.15);

    /* Borders */
    --border-light: 1px solid var(--border);

    /* Motion */
    --ease: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
    --transition-fast:   0.15s ease; /* @kind other */
    --transition-normal: 0.25s ease; /* @kind other */
    --transition-slow:   0.35s ease; /* @kind other */

    /* Hover/press conventions:
       cards   → translateY(-2px) + shadow step up
       buttons → translateY(-1px) on hover, translateY(0) on :active
       links   → indigo color + faint indigo wash background          */
    --lift-card:   translateY(-2px); /* @kind other */
    --lift-btn:    translateY(-1px); /* @kind other */
}