/*
 * Chakloon UIX tokens — the single source of design truth for every
 * frontend in the chakloon.com zone. Products import this file via
 * `import "@chakloon/uix/styles.css"` and must not redefine these
 * variables locally. If a product needs a value that is not here,
 * the value is added HERE first (new UIX release), then consumed.
 *
 * Layers:
 *   1. --ck-*  brand tokens (colors, type scale, radius, spacing,
 *      shadows, shell geometry). Canonical names, px values.
 *   2. shadcn semantic variables (HSL triplets) mapped onto the same
 *      palette so every stock component is branded out of the box.
 */

:root {
  /* ---- 1. Brand palette ------------------------------------------ */
  --ck-bg: #F5F7FB;            /* catalogs/promo/tools background; the social feed product itself is white (owner rule 2026-08-08) */
  --ck-surface: #FFFFFF;       /* cards, panels, inputs, popovers     */
  --ck-border: #DEE5EE;        /* visible component borders           */
  --ck-border-soft: #E3E8F2;   /* subtle dividers, low-emphasis lines */
  --ck-soft: #F1F5F9;          /* muted chips, hover fills, skeletons */
  --ck-hover: #F9FAFB;         /* row/dropdown hover background       */
  --ck-ink: #1F1F1F;           /* brand body text                     */
  --ck-slate: #0F172A;         /* headings, dense system text         */
  --ck-primary: #111827;       /* strongest action (primary buttons)  */
  --ck-muted: #667085;         /* secondary text, hints, metadata     */
  --ck-muted-cool: #6B7280;    /* timestamps, counters, inactive nav  */
  --ck-blue: #45A4E1;          /* brand accent: links, active states  */
  --ck-blue-hover: #3B9BDB;    /* accent hover/pressed                */
  --ck-blue-soft: #EAF4FB;     /* selected rows, info chips           */
  --ck-success: #16A34A;
  --ck-success-dark: #166534;
  --ck-success-bg: #DCFCE7;
  --ck-danger: #DC2626;
  --ck-danger-bg: #FEF2F2;
  --ck-danger-text: #991B1B;
  --ck-ink-deep: #111318;      /* deepest neutral, hero text on promo   */

  /* ---- Project accent triads --------------------------------------
     Every ecosystem project picks exactly ONE triad (base/hover/soft).
     Chakloon itself is blue; the assignment of other triads to other
     projects is an owner decision recorded per project.               */
  --ck-accent-blue: #45A4E1;   --ck-accent-blue-hover: #3B9BDB;   --ck-accent-blue-soft: #EAF4FB;
  --ck-accent-violet: #7A78E8; --ck-accent-violet-hover: #6866D9; --ck-accent-violet-soft: #F0EFFF;
  --ck-accent-teal: #35B6A5;   --ck-accent-teal-hover: #2AA394;   --ck-accent-teal-soft: #E8F7F4;
  --ck-accent-coral: #F0786A;  --ck-accent-coral-hover: #E26557;  --ck-accent-coral-soft: #FDEDEA;
  --ck-accent-amber: #E8B34A;  --ck-accent-amber-hover: #D9A139;  --ck-accent-amber-soft: #FCF5E5;
  --ck-accent-pink: #E45B91;   --ck-accent-pink-hover: #D54A81;   --ck-accent-pink-soft: #FDECF3;

  /* ---- 2. Typography --------------------------------------------- */
  --ck-font-sans: "Montserrat", ui-sans-serif, system-ui, sans-serif;
  --ck-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;
  /* Scale: value pairs are font-size/line-height. Weights: 400 body,
     500 controls, 600 section titles, 700 brand emphasis only. */
  --ck-text-xs: 12px;   --ck-leading-xs: 16px;   /* fine print only    */
  --ck-text-sm: 13px;   --ck-leading-sm: 18px;   /* metadata, hints    */
  --ck-text-md: 14px;   --ck-leading-md: 20px;   /* controls, dense UI */
  --ck-text-base: 16px; --ck-leading-base: 24px; /* body, post text    */
  --ck-text-lg: 20px;   --ck-leading-lg: 28px;   /* card/section title */
  --ck-text-xl: 24px;   --ck-leading-xl: 32px;   /* page section head  */
  --ck-text-2xl: 32px;  --ck-leading-2xl: 40px;  /* page title         */

  /* ---- 3. Geometry ------------------------------------------------ */
  /* Radius scale — no values outside this scale in products.          */
  --ck-radius-sm: 8px;         /* inputs, small buttons, chips        */
  --ck-radius-md: 12px;        /* buttons, dialogs, dropdowns         */
  --ck-radius-lg: 18px;        /* cards, media frames                 */
  --ck-radius-pill: 999px;     /* pills, FAB, avatars fallback        */
  /* Spacing unit — paddings/margins are multiples of 4px.             */
  --ck-space: 4px;
  /* Shell geometry (see CHAKLOON_SHELL_CONTRACT.md).                  */
  --ck-header-height: 68px;
  --ck-rail-collapsed: 68px;
  --ck-rail-expanded: 232px;
  --ck-content-max: 1000px;    /* default centered content width      */
  --ck-content-narrow: 700px;  /* approved Passport exception         */
  --ck-z-header: 90;
  --ck-z-rail: 100;
  --ck-z-overlay: 1000;

  /* ---- 4. Elevation ----------------------------------------------- */
  --ck-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --ck-shadow-md: 0 4px 16px rgba(15, 23, 42, 0.08);
  --ck-shadow-lg: 0 14px 42px rgba(15, 23, 42, 0.18);

  /* ---- 5. shadcn semantic mapping (light) ------------------------- */
  --background: 220 43% 97%;          /* #F5F7FB */
  --foreground: 0 0% 12%;             /* #1F1F1F */
  --card: 0 0% 100%;                  /* #FFFFFF */
  --card-foreground: 0 0% 12%;
  --popover: 0 0% 100%;
  --popover-foreground: 0 0% 12%;
  --primary: 218 28% 17%;             /* #111827 strongest action */
  --primary-foreground: 0 0% 100%;
  --secondary: 211 36% 95%;           /* #EEF2F7 */
  --secondary-foreground: 0 0% 12%;
  --muted: 210 40% 96%;               /* #F1F5F9 */
  --muted-foreground: 220 9% 46%;     /* #6B7280 */
  --accent: 203 72% 58%;              /* #45A4E1 brand accent */
  --accent-foreground: 0 0% 100%;
  --destructive: 0 72% 51%;           /* #DC2626 */
  --destructive-foreground: 0 0% 100%;
  --border: 213 38% 90%;              /* #DEE5EE */
  --input: 213 38% 90%;
  --ring: 203 72% 58%;                /* focus ring = brand accent */
  --radius: 0.5rem;
  --chart-1: 203 72% 58%;
  --chart-2: 142 71% 45%;
  --chart-3: 0 72% 51%;
  --chart-4: 215 20% 65%;
  --chart-5: 218 28% 17%;
  --sidebar-background: 220 43% 97%;
  --sidebar-foreground: 0 0% 12%;
  --sidebar-primary: 203 72% 58%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 204 65% 95%;
  --sidebar-accent-foreground: 0 0% 12%;
  --sidebar-border: 213 38% 90%;
  --sidebar-ring: 203 72% 58%;
}

/* Dark theme — experimental, not yet a product surface. Kept branded:
   deep slate instead of generic near-black, accent stays Chakloon blue. */
.dark {
  --background: 222 47% 7%;
  --foreground: 210 40% 96%;
  --card: 222 44% 10%;
  --card-foreground: 210 40% 96%;
  --popover: 222 44% 10%;
  --popover-foreground: 210 40% 96%;
  --primary: 210 40% 96%;
  --primary-foreground: 222 47% 10%;
  --secondary: 220 30% 16%;
  --secondary-foreground: 210 40% 96%;
  --muted: 220 30% 16%;
  --muted-foreground: 218 11% 65%;
  --accent: 203 72% 58%;
  --accent-foreground: 0 0% 100%;
  --destructive: 0 62.8% 40%;
  --destructive-foreground: 0 0% 98%;
  --border: 220 26% 20%;
  --input: 220 26% 20%;
  --ring: 203 72% 58%;
  --chart-1: 203 72% 58%;
  --chart-2: 142 60% 50%;
  --chart-3: 0 62% 55%;
  --chart-4: 215 20% 65%;
  --chart-5: 210 40% 96%;
  --sidebar-background: 222 47% 8%;
  --sidebar-foreground: 210 40% 96%;
  --sidebar-primary: 203 72% 58%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 220 30% 16%;
  --sidebar-accent-foreground: 210 40% 96%;
  --sidebar-border: 220 26% 20%;
  --sidebar-ring: 203 72% 58%;
}

/* Like pop — plays when the heart toggles into the liked state. */
@keyframes ck-like-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.35); }
  70% { transform: scale(0.9); }
  100% { transform: scale(1); }
}
[data-uix-like][data-state="on"] svg {
  animation: ck-like-pop 0.35s cubic-bezier(0.2, 0.8, 0.3, 1.2);
}