/* ============================================================
   KSC Brand Tokens
   ----------------------------------------------------------------
   Design tokens for K Squared Capital products. Import this file
   FIRST in any KSC web property so the variables below are
   available to every component stylesheet.

   Source of truth: ~/.claude/skills/ksc-branding/SKILL.md
   ============================================================ */

/* ---------- Aeonik web font ---------------------------------
   We currently only have the Regular weight licensed locally.
   It's declared with a wide font-weight range so the browser
   uses Aeonik for every weight (400-700) and synthesises bold
   when needed. This is a stop-gap — when the licensed Medium
   and Bold .ttf/.woff2 files are added to /static/fonts/,
   replace this single @font-face with three weight-specific
   declarations (400/500/700) for crisper typography.

   Drop replacement files into /static/fonts/ on the server
   side AND into ~/.claude/skills/ksc-branding/assets/fonts/
   to keep the canonical skill in sync.
   --------------------------------------------------------- */
@font-face {
    font-family: 'Aeonik';
    src: url('/static/fonts/Aeonik-Regular.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root {
    /* ---------- Brand colors ----------
       Hard rules from the branding skill:
         - #0043FF is the ONLY brand blue. Do not invent shades.
         - White or very light gray backgrounds preferred.
         - Never use gradients on logos.
    */
    --ksc-blue:           #0043FF;
    --ksc-blue-hover:     #0036cc;  /* darker shade for hover/active only */
    --ksc-blue-soft:      #e6ecff;  /* tint for blue-on-white surfaces */
    --ksc-blue-softer:    #f2f5ff;  /* even lighter tint for hovers */

    --ksc-white:          #ffffff;
    --ksc-black:          #000000;
    --ksc-gray-light:     #f5f5f5;  /* section dividers, background accents */
    --ksc-gray-medium:    #999999;  /* captions, subtle borders */

    /* ---------- Functional grays (derived) ----------
       The brand only specifies two grays. The rest are local
       conveniences for borders / dividers / muted text. Keep them
       in this neutral family — never re-use the brand blue for
       these roles. */
    --ksc-text:           #1a1a1a;
    --ksc-text-muted:     #666666;
    --ksc-text-subtle:    #888888;
    --ksc-border:         #e3e3e3;
    --ksc-border-strong:  #cccccc;
    --ksc-bg-page:        #f7f7f8;
    --ksc-bg-card:        #ffffff;

    /* ---------- Status colors ----------
       Reds and greens are P&L semantics, NOT brand colors. They
       stay outside the blue palette and should only be used for
       gain/loss, error/success states. */
    --ksc-positive:       #16a34a;
    --ksc-positive-soft:  #f1faf3;
    --ksc-negative:       #dc2626;
    --ksc-negative-soft:  #fdf3f1;
    --ksc-warn:           #e6a23c;
    --ksc-warn-soft:      #fff8e6;

    /* ---------- Typography ----------
       Aeonik is the brand font. Inter is the explicitly-named
       free fallback in the branding skill. The OS sans-serif is
       the last-resort fallback. */
    --ksc-font:           'Aeonik', 'Inter', 'Helvetica Neue', system-ui, -apple-system, Arial, sans-serif;
    --ksc-font-mono:      'JetBrains Mono', 'Consolas', 'Courier New', monospace;

    --ksc-line-body:      1.5;
    --ksc-line-tight:     1.3;
    --ksc-line-loose:     1.6;

    /* ---------- Spacing scale ----------
       Used by the responsive layout. 4px base. */
    --ksc-space-1:        4px;
    --ksc-space-2:        8px;
    --ksc-space-3:        12px;
    --ksc-space-4:        16px;
    --ksc-space-5:        20px;
    --ksc-space-6:        24px;
    --ksc-space-8:        32px;

    /* ---------- Radii / shadows ---------- */
    --ksc-radius-sm:      4px;
    --ksc-radius:         8px;
    --ksc-radius-lg:      12px;
    --ksc-shadow-card:    0 1px 4px rgba(0, 0, 0, 0.06);
    --ksc-shadow-modal:   0 10px 40px rgba(0, 0, 0, 0.3);

    /* ---------- Mobile tap target ----------
       iOS HIG / WCAG: minimum 44x44px for tap targets. */
    --ksc-tap-target:     44px;
}