/* cardcenter.app brand tokens - Look C: Holo
   Same --cc- names as /brand/tokens.css so the files are swappable.
   Mint roles are re-mapped: --cc-mint* = lime pass-green, so existing markup keeps working.

   WCAG 2.1 contrast, computed (text on --cc-bg #0A0A1F | on --cc-surface #14143A):
     --cc-text   #FAF7FF  18.41 | 16.64  AAA
     --cc-muted  #B4B0D6   9.41 |  8.50  AAA
     --cc-dim    #6E6A9A   3.89 |  3.52  FAILS body text - decorative/large only
     --cc-violet #7B5CFF   4.48 |  4.04  FAILS AA body by 0.02 - use --cc-violet-text (#A894FF 7.75 | 7.01)
     --cc-cyan   #22D3EE  10.80 |  9.76  AAA
     --cc-pink   #FF4DA6   6.38 |  5.76  AA
     --cc-lime   #B6F24A  14.67 | 13.26  AAA     --cc-warn #FFC857 12.69   --cc-fail #FF6B7A 7.10
     Grader accents on bg: PSA 6.46, Beckett 10.43, CGC 7.04, ACE 8.56 (all AA+)
   Buttons: ink #0A0A1F on lime 14.67, on cyan 10.80, on pink 6.38 (AA).
            white on violet 4.11 (large/bold UI only, AA-large 3.0) - prefer ink on gradient.
   Light bg (--cc-paper #FAF7FF): ink 18.41; --cc-violet-d #4A2FD0 7.60.

   GRADIENT TEXT: --cc-holo-gradient (violet stop 4.48:1) is for large display text (>=24px or 19px bold,
   needs 3:1) and decoration only. For body, small or any text that must pass AA use
   --cc-holo-gradient-text (stops all >=6.38:1 on --cc-bg) or flat --cc-text-holo-fallback (#22D3EE, 10.8:1). */
:root {
  /* Brand (mint slot -> lime pass-green; accents added) */
  --cc-mint: #B6F24A;          /* primary accent, pass (lime) */
  --cc-mint-2: #CBF77E;        /* hover, highlights */
  --cc-mint-d: #4A2FD0;        /* accent on light backgrounds (deep violet) */
  --cc-mint-glow: rgba(182, 242, 74, 0.18);
  --cc-violet: #7B5CFF;
  --cc-violet-text: #A894FF;   /* violet safe for text on dark */
  --cc-violet-d: #4A2FD0;
  --cc-cyan: #22D3EE;
  --cc-pink: #FF4DA6;
  --cc-lime: #B6F24A;

  /* Surfaces (dark, default) */
  --cc-bg: #0A0A1F;            /* midnight, page */
  --cc-bg-2: #0F0F2B;          /* sections */
  --cc-surface: #14143A;       /* cards */
  --cc-line: #23235A;          /* hairlines */
  --cc-line-2: #3A3A85;        /* strong borders */

  /* Text */
  --cc-text: #FAF7FF;
  --cc-muted: #B4B0D6;
  --cc-dim: #6E6A9A;           /* decorative only, fails AA for body text */

  /* Light-background variants */
  --cc-paper: #FAF7FF;
  --cc-paper-2: #EFEAFB;
  --cc-ink: #0A0A1F;

  /* Semantic */
  --cc-pass: #B6F24A;
  --cc-warn: #FFC857;
  --cc-fail: #FF6B7A;
  --cc-info: #22D3EE;

  /* Grading companies (UI accents only, not official brand colours) */
  --cc-psa: #FF5C61;
  --cc-beckett: #E0B94F;
  --cc-cgc: #5B9BFF;
  --cc-ace: #B79CFF;

  /* Holo extras */
  --cc-holo-gradient: linear-gradient(135deg, #7B5CFF 0%, #22D3EE 30%, #B6F24A 55%, #FF4DA6 80%, #7B5CFF 100%); /* decoration + large text only */
  --cc-holo-gradient-text: linear-gradient(90deg, #A894FF 0%, #22D3EE 40%, #B6F24A 70%, #FF4DA6 100%);        /* AA-safe text on --cc-bg */
  --cc-text-holo-fallback: #22D3EE;
  --cc-holo-gradient-flat: #7B5CFF;   /* mono/no-gradient fallback */
  --cc-sheen: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.28) 48%, rgba(255,255,255,0.05) 56%, transparent 70%);
  --cc-sheen-size: 250% 100%;

  /* Type */
  --cc-font-display: 'Sora', 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --cc-font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --cc-font-mono: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
  --cc-fs-xs: 0.75rem;   --cc-fs-sm: 0.875rem;  --cc-fs-base: 1rem;
  --cc-fs-lg: 1.125rem;  --cc-fs-xl: 1.375rem;  --cc-fs-2xl: 1.75rem;
  --cc-fs-3xl: 2.25rem;  --cc-fs-4xl: clamp(2.5rem, 5.4vw, 4rem);
  --cc-fw-regular: 400;  --cc-fw-medium: 500;  --cc-fw-semibold: 600;  --cc-fw-bold: 800;
  --cc-lh-tight: 1.05;   --cc-lh-snug: 1.3;    --cc-lh-body: 1.6;
  --cc-tracking-tight: -0.035em;  --cc-tracking-wide: 0.12em;

  /* Spacing (4px base) */
  --cc-space-1: 4px;  --cc-space-2: 8px;   --cc-space-3: 12px; --cc-space-4: 16px;
  --cc-space-5: 24px; --cc-space-6: 32px;  --cc-space-7: 48px; --cc-space-8: 64px;
  --cc-space-9: 96px; --cc-space-section: clamp(72px, 10vw, 128px);

  /* Radius (rounder, sticker-like) */
  --cc-radius-sm: 8px; --cc-radius-md: 14px; --cc-radius-lg: 24px; --cc-radius-pill: 999px;

  /* Shadow */
  --cc-shadow-sm: 0 1px 2px rgba(0, 0, 10, 0.5);
  --cc-shadow-md: 0 10px 28px rgba(0, 0, 10, 0.5);
  --cc-shadow-lg: 0 28px 72px rgba(0, 0, 10, 0.65);
  --cc-shadow-glow: 0 0 0 1px var(--cc-cyan), 0 0 28px rgba(123, 92, 255, 0.45);

  /* Motion */
  --cc-dur-fast: 120ms; --cc-dur-base: 220ms; --cc-dur-slow: 420ms; --cc-dur-sheen: 6s;
  --cc-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --cc-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --cc-ease-snap: cubic-bezier(0.34, 1.56, 0.64, 1);
}
@media (prefers-reduced-motion: reduce) {
  :root { --cc-dur-fast: 0ms; --cc-dur-base: 0ms; --cc-dur-slow: 0ms; --cc-dur-sheen: 0s; }
}