/* ============================================================================
   MCO Design System 2026  ·  star365 HQ
   Single reusable design layer for all MCO / star365 dashboards.
   Built from June-2026 GitHub/web design research:
     - OKLCH color tokens + relative-color derivation + color-mix()
     - light-dark() adaptive theming, color-scheme aware
     - Layered glassmorphism (3 depth tiers) as information hierarchy
     - Refined bento grid (exaggerated rounding + micro-interactions)
     - Scroll-driven reveal animations (animation-timeline: view())
     - @starting-style enter transitions, View Transitions ready
     - Purposeful micro-interactions: cursor-proximity glow, press physics
     - text-wrap: balance/pretty, fluid type scale
   Framework-agnostic. All classes are `mco-` prefixed → safe with Tailwind/Alpine.
   Drop-in:  <link rel="stylesheet" href="/mco-design-2026.css">  +  body.mco
   Version: 1.0.0  (2026-06-29)
   ========================================================================== */

@layer mco.tokens, mco.base, mco.components, mco.motion, mco.utilities;

/* ── TOKENS ─────────────────────────────────────────────────────────────── */
@layer mco.tokens {
  :root {
    color-scheme: dark light;

    /* Brand seed (OKLCH: perceptually-uniform, wide-gamut).
       Derived shades use relative color syntax → single source of truth. */
    --mco-brand:        oklch(0.62 0.19 256);   /* electric indigo */
    --mco-brand-2:      oklch(0.72 0.17 168);   /* mco teal       */
    --mco-accent:       oklch(0.78 0.18 64);    /* amber signal   */
    --mco-danger:       oklch(0.63 0.22 25);
    --mco-warn:         oklch(0.80 0.16 85);
    --mco-ok:           oklch(0.74 0.16 158);

    /* Relative-color derivations (baseline 2026: oklch(from …)) */
    --mco-brand-soft:   oklch(from var(--mco-brand) l c h / 0.16);
    --mco-brand-line:   oklch(from var(--mco-brand) calc(l + 0.05) c h / 0.42);
    --mco-brand-glow:   oklch(from var(--mco-brand) calc(l + 0.08) c h / 0.55);

    /* Surfaces — light-dark() picks per color-scheme, no media query needed */
    --mco-bg-0:  light-dark(oklch(0.97 0.01 256), oklch(0.17 0.025 264));
    --mco-bg-1:  light-dark(oklch(0.99 0.005 256), oklch(0.21 0.03 264));
    --mco-surface:    light-dark(oklch(1 0 0 / 0.72), oklch(0.27 0.035 264 / 0.55));
    --mco-surface-2:  light-dark(oklch(1 0 0 / 0.85), oklch(0.31 0.04 264 / 0.62));
    --mco-stroke:     light-dark(oklch(0.55 0.03 264 / 0.22), oklch(0.72 0.04 264 / 0.18));
    --mco-stroke-str: light-dark(oklch(0.45 0.04 264 / 0.34), oklch(0.80 0.05 264 / 0.30));

    /* Text */
    --mco-ink:    light-dark(oklch(0.25 0.03 264), oklch(0.96 0.012 264));
    --mco-ink-2:  light-dark(oklch(0.45 0.025 264), oklch(0.80 0.02 264));
    --mco-ink-3:  light-dark(oklch(0.58 0.02 264), oklch(0.64 0.02 264));

    /* Type scale — fluid clamp(), 1.2 ratio */
    --mco-fs-xs:  clamp(0.70rem, 0.68rem + 0.1vw, 0.78rem);
    --mco-fs-sm:  clamp(0.80rem, 0.77rem + 0.15vw, 0.90rem);
    --mco-fs-base:clamp(0.92rem, 0.89rem + 0.18vw, 1.02rem);
    --mco-fs-lg:  clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
    --mco-fs-xl:  clamp(1.6rem, 1.3rem + 1.3vw, 2.4rem);
    --mco-fs-2xl: clamp(2.2rem, 1.7rem + 2.4vw, 3.6rem);

    /* Radius — exaggerated 2026 bento rounding */
    --mco-r-sm: 0.6rem;
    --mco-r:    1.15rem;
    --mco-r-lg: 1.7rem;
    --mco-r-xl: 2.2rem;

    /* Space */
    --mco-gap: clamp(0.7rem, 0.4rem + 1vw, 1.15rem);

    /* Motion tokens */
    --mco-ease:       cubic-bezier(0.22, 1, 0.36, 1);     /* easeOutQuint */
    --mco-ease-spring:cubic-bezier(0.34, 1.56, 0.64, 1);  /* gentle overshoot */
    --mco-dur-1: 140ms;
    --mco-dur-2: 280ms;
    --mco-dur-3: 520ms;

    --mco-shadow: 0 1px 2px oklch(0 0 0 / 0.18),
                  0 12px 34px -12px oklch(0.2 0.04 264 / 0.45);
    --mco-shadow-glow: 0 0 0 1px var(--mco-brand-line),
                       0 18px 48px -16px var(--mco-brand-glow);

    --mco-font: ui-sans-serif, system-ui, "Pretendard", "Apple SD Gothic Neo",
                "Malgun Gothic", -apple-system, Roboto, sans-serif;
  }

  /* Manual theme override hooks: <html data-theme="light|dark"> */
  [data-theme="light"] { color-scheme: light; }
  [data-theme="dark"]  { color-scheme: dark; }

  /* Graceful degradation — pre-OKLCH / pre-light-dark() browsers.
     Without this, unsupported engines drop the custom props and surfaces
     would render with no background. Safe dark hex fallbacks keep contrast. */
  @supports not (color: oklch(0.5 0.1 250)) {
    :root {
      --mco-brand:#5b7cfa; --mco-brand-2:#34d3b0; --mco-accent:#f0a93b;
      --mco-danger:#e5564b; --mco-warn:#e7b94d; --mco-ok:#3fd089;
      --mco-brand-soft:rgba(91,124,250,0.16); --mco-brand-line:rgba(91,124,250,0.42); --mco-brand-glow:rgba(91,124,250,0.55);
      --mco-bg-0:#13182a; --mco-bg-1:#1a2034;
      --mco-surface:rgba(40,48,72,0.55); --mco-surface-2:rgba(48,57,84,0.62);
      --mco-stroke:rgba(150,165,200,0.18); --mco-stroke-str:rgba(170,185,215,0.3);
      --mco-ink:#eef1f8; --mco-ink-2:#c4ccde; --mco-ink-3:#9aa3bd;
    }
  }
}

/* ── BASE ───────────────────────────────────────────────────────────────── */
@layer mco.base {
  body.mco {
    font-family: var(--mco-font);
    color: var(--mco-ink);
    font-size: var(--mco-fs-base);
    background:
      radial-gradient(1200px 700px at 12% -8%, var(--mco-brand-soft), transparent 60%),
      radial-gradient(1000px 600px at 100% 0%, oklch(from var(--mco-brand-2) l c h / 0.12), transparent 55%),
      linear-gradient(180deg, var(--mco-bg-0), var(--mco-bg-1));
    background-attachment: fixed;
    min-height: 100vh;
  }
  body.mco h1, body.mco h2, body.mco h3 { text-wrap: balance; letter-spacing: -0.015em; }
  body.mco p, body.mco li { text-wrap: pretty; }
  body.mco ::selection { background: var(--mco-brand-glow); color: oklch(0.98 0 0); }

  /* Scrollbar */
  body.mco *::-webkit-scrollbar { width: 10px; height: 10px; }
  body.mco *::-webkit-scrollbar-thumb {
    background: var(--mco-stroke-str); border-radius: 99px;
    border: 2px solid transparent; background-clip: padding-box;
  }
}

/* ── COMPONENTS ─────────────────────────────────────────────────────────── */
@layer mco.components {
  /* Glass surfaces — 3 depth tiers communicate information hierarchy */
  .mco-glass {
    background: var(--mco-surface);
    backdrop-filter: blur(14px) saturate(1.4);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    border: 1px solid var(--mco-stroke);
    border-radius: var(--mco-r);
    box-shadow: var(--mco-shadow);
  }
  .mco-glass-2 {
    background: var(--mco-surface-2);
    backdrop-filter: blur(20px) saturate(1.6);
    -webkit-backdrop-filter: blur(20px) saturate(1.6);
    border: 1px solid var(--mco-stroke-str);
    border-radius: var(--mco-r-lg);
    box-shadow: var(--mco-shadow);
  }

  /* Bento grid — dense-packed, exaggerated rounding, responsive auto-fit */
  .mco-bento {
    display: grid;
    gap: var(--mco-gap);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
    grid-auto-rows: 1fr;
    grid-auto-flow: dense;
  }
  .mco-bento > .col-2 { grid-column: span 2; }
  .mco-bento > .row-2 { grid-row: span 2; }
  @container (max-width: 520px) {
    .mco-bento > .col-2 { grid-column: span 1; }
  }

  /* Tile (bento cell / KPI card) with cursor-proximity glow micro-interaction.
     --mx/--my are written by mco.interactions.js (pointer %); fallback centered. */
  .mco-tile {
    position: relative;
    padding: clamp(0.95rem, 0.7rem + 0.8vw, 1.4rem);
    border-radius: var(--mco-r);
    background: var(--mco-surface);
    backdrop-filter: blur(14px) saturate(1.4);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    border: 1px solid var(--mco-stroke);
    box-shadow: var(--mco-shadow);
    overflow: clip;
    transition: transform var(--mco-dur-2) var(--mco-ease),
                border-color var(--mco-dur-2) var(--mco-ease),
                box-shadow var(--mco-dur-2) var(--mco-ease);
    transform: translateZ(0);
  }
  .mco-tile::before {
    content: "";
    position: absolute; inset: -1px;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--mco-dur-2) var(--mco-ease);
    background: radial-gradient(
      320px circle at var(--mx, 50%) var(--my, 0%),
      var(--mco-brand-soft), transparent 60%);
  }
  .mco-tile:hover {
    transform: translateY(-3px);
    border-color: var(--mco-brand-line);
    box-shadow: var(--mco-shadow-glow);
  }
  .mco-tile:hover::before { opacity: 1; }

  /* KPI emphasis tile */
  .mco-kpi {
    background:
      linear-gradient(135deg, var(--mco-brand-soft),
        oklch(from var(--mco-brand-2) l c h / 0.12));
    border: 1px solid var(--mco-brand-line);
  }
  .mco-kpi-label { font-size: var(--mco-fs-xs); text-transform: uppercase;
    letter-spacing: 0.08em; color: var(--mco-ink-3); font-weight: 600; }
  .mco-kpi-value { font-size: var(--mco-fs-xl); font-weight: 800; line-height: 1.05;
    margin-top: 0.25rem; font-variant-numeric: tabular-nums;
    background: linear-gradient(120deg, var(--mco-ink), var(--mco-brand));
    -webkit-background-clip: text; background-clip: text; color: transparent; }
  .mco-kpi-sub { font-size: var(--mco-fs-sm); color: var(--mco-ink-3); margin-top: 0.4rem; }

  /* Pill / badge */
  .mco-pill {
    display: inline-flex; align-items: center; gap: 0.35em;
    padding: 0.2em 0.7em; border-radius: 99px;
    font-size: var(--mco-fs-xs); font-weight: 600;
    background: var(--mco-brand-soft); color: var(--mco-ink-2);
    border: 1px solid var(--mco-brand-line);
  }
  .mco-pill.ok  { background: oklch(from var(--mco-ok) l c h / 0.16);
    border-color: oklch(from var(--mco-ok) l c h / 0.4); }
  .mco-pill.warn{ background: oklch(from var(--mco-warn) l c h / 0.16);
    border-color: oklch(from var(--mco-warn) l c h / 0.4); }
  .mco-pill.bad { background: oklch(from var(--mco-danger) l c h / 0.16);
    border-color: oklch(from var(--mco-danger) l c h / 0.4); }

  /* Button — physical press feedback */
  .mco-btn {
    --_b: var(--mco-brand);
    display: inline-flex; align-items: center; gap: 0.5em;
    padding: 0.55em 1.05em; border-radius: var(--mco-r-sm);
    font-weight: 650; font-size: var(--mco-fs-sm); cursor: pointer;
    color: oklch(0.99 0 0);
    background: linear-gradient(180deg,
      oklch(from var(--_b) calc(l + 0.05) c h),
      var(--_b));
    border: 1px solid oklch(from var(--_b) calc(l + 0.08) c h / 0.6);
    box-shadow: 0 1px 0 oklch(1 0 0 / 0.25) inset,
                0 8px 20px -10px var(--_b);
    transition: transform var(--mco-dur-1) var(--mco-ease-spring),
                filter var(--mco-dur-1) var(--mco-ease),
                box-shadow var(--mco-dur-2) var(--mco-ease);
  }
  .mco-btn:hover { filter: brightness(1.06); box-shadow: var(--mco-shadow-glow); }
  .mco-btn:active { transform: scale(0.96) translateY(1px); }
  .mco-btn.ghost {
    background: var(--mco-surface); color: var(--mco-ink);
    border: 1px solid var(--mco-stroke-str); box-shadow: none;
  }

  /* Section / panel heading */
  .mco-h { font-size: var(--mco-fs-lg); font-weight: 750; margin: 0 0 0.6rem;
    display: flex; align-items: center; gap: 0.5rem; }
  .mco-h::before { content: ""; width: 0.35rem; height: 1.1em; border-radius: 99px;
    background: linear-gradient(var(--mco-brand), var(--mco-brand-2)); }

  /* Animated top progress / accent bar */
  .mco-railbar { height: 3px; border-radius: 99px; overflow: clip;
    background: var(--mco-stroke); }
  .mco-railbar > i { display: block; height: 100%; border-radius: inherit;
    background: linear-gradient(90deg, var(--mco-brand), var(--mco-brand-2), var(--mco-accent));
    background-size: 200% 100%; animation: mco-flow 3.5s linear infinite; }
}

/* ── MOTION ─────────────────────────────────────────────────────────────── */
@layer mco.motion {
  /* Scroll-driven reveal — no JS, baseline 2026. Falls back to instant when
     animation-timeline unsupported (content stays visible). */
  @keyframes mco-rise {
    from { opacity: 0; transform: translateY(22px) scale(0.985); }
    to   { opacity: 1; transform: none; }
  }
  @keyframes mco-flow { to { background-position: 200% 0; } }

  @supports (animation-timeline: view()) {
    .mco-reveal {
      animation: mco-rise linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 32%;
    }
  }

  /* @starting-style enter transition for dynamically-inserted nodes */
  @supports (transition-behavior: allow-discrete) {
    .mco-enter {
      transition: opacity var(--mco-dur-2) var(--mco-ease),
                  transform var(--mco-dur-2) var(--mco-ease);
    }
    @starting-style {
      .mco-enter { opacity: 0; transform: translateY(12px); }
    }
  }

  /* Count-up number hook target (JS adds .mco-counted) */
  .mco-num { font-variant-numeric: tabular-nums; }

  @media (prefers-reduced-motion: reduce) {
    .mco-reveal, .mco-enter, .mco-railbar > i, .mco-tile { animation: none !important; transition: none !important; }
    .mco-tile:hover { transform: none; }
  }
}

/* ── UTILITIES ──────────────────────────────────────────────────────────── */
@layer mco.utilities {
  .mco-stack    { display: flex; flex-direction: column; gap: var(--mco-gap); }
  .mco-row      { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
  .mco-muted    { color: var(--mco-ink-3); }
  .mco-dim      { color: var(--mco-ink-2); }
  .mco-mono     { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
  .mco-container{ container-type: inline-size; }
  .mco-grad-text{ background: linear-gradient(120deg, var(--mco-brand), var(--mco-brand-2));
    -webkit-background-clip: text; background-clip: text; color: transparent; }
  .mco-divider  { height: 1px; background: var(--mco-stroke); margin: var(--mco-gap) 0; }
}