/* ============================================================================
 * app/personal-tokens.css  ·  Cenora PERSONAL overrides on top of core-tokens
 * ----------------------------------------------------------------------------
 * Kit additions used here (annotated for reverse-sync back to Business):
 *   • --font-script  → NEW slot. Core only had --font-display. Personal needs
 *     the script ONLY on the wordmark, while headings use an elegant display
 *     serif — so we split: --font-display = serif, --font-script = Caveat.
 *     (Recommend folding --font-script into core-v1.1.)
 *   • --radius-*     → bumped up for soft mobile geometry (kit addition, §2).
 *   • Personal runs entirely OFF the Business teal. The default :root below is
 *     the NEUTRAL "Sand" theme; themes.js swaps the brand/accent/surface vars
 *     for the other 9. No data-theme="dark".
 *   • .cn-sheet-* + @keyframes  → bottom-sheet shell helpers (core §2 notes
 *     these live in the consuming app, not in core-tokens).
 * ========================================================================== */

:root {
  /* Type — clean humanist UI sans, refined editorial serif display, optional script */
  --font-sans:    'DM Sans', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: 'Newsreader', 'Fraunces', Georgia, serif;   /* headings — editorial serif */
  --font-script:  'Newsreader', Georgia, serif; /* wordmark flourish (was cursive; refined by default) */

  /* Softer mobile geometry */
  --radius-xs:   6px;
  --radius-sm:   10px;
  --radius-md:   14px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-pill: 999px;

  /* Warm, refined shadows — soft & diffuse, never sticker-like */
  --shadow-sm:  0 1px 2px rgba(60,40,20,.05), 0 0 0 1px rgba(60,40,20,.03);
  --shadow-md:  0 8px 22px -8px rgba(60,40,20,.16), 0 2px 6px rgba(60,40,20,.06);
  --shadow-lg:  0 26px 50px -16px rgba(60,40,20,.24), 0 6px 14px rgba(60,40,20,.08);

  /* ── DEFAULT THEME = "Sand" (neutral) — themes.js overrides these ── */
  --brand:        #B07A4A;
  --brand-hover:  #976437;
  --brand-mid:    #A06B3C;
  --brand-light:  #C49156;
  --brand-soft:   #F4EADB;

  --accent:       #C99A4E;
  --accent-soft:  #FBF1DC;
  --accent-deep:  #8A6A2E;

  --cream:        #F4ECDD;
  --cream-deep:   #EDE2CF;

  --ink:          #2A241C;
  --ink-soft:     #5E5547;
  --ink-mute:     #948A78;
  --ink-faint:    #BCB2A2;

  --divider:        #EAE1D2;
  --divider-strong: #D8CDB8;
  --divider-soft:   #F2EADE;

  --success:      #5E7C53;
  --success-soft: #E8EFDF;
  --warn:         #C08A3A;
  --warn-soft:    #FAF0D8;
  --danger:       #C0392B;   /* SOS — kept vivid & constant across themes */
  --danger-soft:  #FBEAE8;
  --info:         #8A6A2E;    /* coordinated warm so AICallout reads on-brand */
  --info-soft:    #FBF1DC;

  --bg-app:       #FAF6EE;
  --bg-surface:   #FFFFFF;
  --bg-muted:     #F1EADD;

  --ring-focus:   0 0 0 3px color-mix(in srgb, var(--accent) 38%, transparent);
}

html, body { background: var(--bg-app); }
body { font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }

/* Personal app: headings use the serif display, NOT the script. */
h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 500; }

/* The wordmark flourish — refined serif italic by default; cursive only if the user opts in */
.wordmark-script { font-family: var(--font-script); font-weight: 500; font-style: italic; line-height: 1; letter-spacing: -0.01em; }
:root[data-script-cursive] .wordmark-script { font-style: normal; line-height: 0.8; letter-spacing: 0; }

/* Smooth theme transitions */
:root { transition: none; }
.theme-anim, .theme-anim * {
  transition: background-color .35s ease, border-color .35s ease, color .35s ease;
}

/* ── Bottom-sheet shell helpers (mobile) ─────────────────────────────── */
.cn-sheet-overlay {
  position: absolute; inset: 0; z-index: 40;
  background: rgba(30,22,12,.42);
  animation: cn-fade-in .2s ease-out;
}
.cn-sheet-content {
  position: absolute; z-index: 50; background: var(--bg-surface);
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-lg);
}
/* Mobile default: dock to bottom as a rounded sheet */
.cn-sheet-content {
  left: 0; right: 0; bottom: 0; max-height: 88%;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  animation: cn-sheet-up .3s cubic-bezier(.22,.61,.36,1);
}
.cn-sheet-content[data-side="right"] {
  left: auto; top: 0; bottom: 0; width: 380px; max-width: 86%; max-height: none;
  border-radius: var(--radius-xl) 0 0 var(--radius-xl);
  animation: cn-sheet-right .3s cubic-bezier(.22,.61,.36,1);
}
@keyframes cn-fade-in { from { opacity: 0 } to { opacity: 1 } }
@keyframes cn-sheet-up { from { transform: translateY(100%) } to { transform: translateY(0) } }
@keyframes cn-sheet-right { from { transform: translateX(100%) } to { transform: translateX(0) } }
/* During a tab-bar pull-to-open, the all-apps tray grows by height under the
   finger — suppress the canned slide-up entrance (and backdrop fade) so it
   feels like expanding the existing bar, not summoning a new panel. */
.cnr-grid-pull .cn-sheet-content { animation: none !important; }
.cnr-grid-pull .cn-sheet-overlay { animation: none !important; }

/* ── Skin-specific CSS hooks ─────────────────────────────────────── */

/* Editorial + Grid Lines: flat/transparent cards */
[data-skin="editorial"] .cn-card,
[data-skin="gridlines"] .cn-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  border-bottom: 1px solid var(--divider) !important;
}
[data-skin="editorial"] .cn-divider,
[data-skin="gridlines"] .cn-divider {
  background: var(--ink) !important;
}

/* Dark skins: body background */
[data-skin-dark] body,
[data-skin-dark] html {
  background: var(--bg-app) !important;
}
[data-skin-dark] .bg-surface { background: var(--bg-surface) !important; }
[data-skin-dark] .bg-muted   { background: var(--bg-muted) !important; }
[data-skin-dark] .text-ink   { color: var(--ink) !important; }
[data-skin-dark] .text-ink-mute { color: var(--ink-mute) !important; }
[data-skin-dark] .text-ink-soft { color: var(--ink-soft) !important; }
[data-skin-dark] .border-divider { border-color: var(--divider) !important; }

/* Cinema skin: glass card treatment */
[data-skin="cinema"] .cn-soft-card,
[data-skin="cinema"] .bg-surface {
  background: rgba(255,255,255,.07) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-color: rgba(255,255,255,.1) !important;
}

/* Organic skin: extra-rounded buttons */
[data-skin="organic"] button,
[data-skin="organic"] .cn-chip {
  border-radius: var(--radius-xl) !important;
}

/* Precision skin: compact density */
[data-skin="precision"] .cn-screen-in > * { gap: 0 !important; }

/* ── Dark canvas: softly RAISED controls (Linear-style) ───────────────
 * Applies whenever the canvas is dark — a dark COLOR theme (e.g. Onyx), a
 * dark skin, or dark mode. Pure CSS raise: a top inner highlight + bottom
 * inner shade + a soft drop shadow, with a faint top-down gloss layered over
 * whatever background the button already carries. Scoped to pill / rounded
 * button controls only, so flat list rows (no rounded-* class) stay flat. */
[data-skin-dark] :is(button.rounded-pill, button.rounded-full, button.rounded-xl, button.rounded-2xl)[style*="background"]:not([style*="transparent"]):not(:disabled) {
  background-image: linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.02) 46%, rgba(0,0,0,.12)) !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  box-shadow:
    inset 0 1px 0 0 rgba(255,255,255,.10),
    inset 0 -1px 0 0 rgba(0,0,0,.38),
    0 1px 2px rgba(0,0,0,.55),
    0 2px 6px -1px rgba(0,0,0,.45) !important;
  transition: box-shadow .14s ease, background-image .14s ease, transform .06s ease;
}
[data-skin-dark] :is(button.rounded-pill, button.rounded-full, button.rounded-xl, button.rounded-2xl)[style*="background"]:not([style*="transparent"]):not(:disabled):hover {
  background-image: linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.03) 46%, rgba(0,0,0,.12)) !important;
}
[data-skin-dark] :is(button.rounded-pill, button.rounded-full, button.rounded-xl, button.rounded-2xl)[style*="background"]:not([style*="transparent"]):not(:disabled):active {
  background-image: linear-gradient(180deg, rgba(0,0,0,.14), rgba(255,255,255,.03)) !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.5), inset 0 0 0 1px rgba(0,0,0,.3) !important;
  transform: translateY(.5px);
}
/* Dark canvas: lift surface cards with a hairline top highlight so panels read raised too */
[data-skin-dark] .cn-soft-card,
[data-skin-dark] .bg-surface {
  box-shadow: inset 0 1px 0 0 rgba(255,255,255,.04), 0 1px 2px rgba(0,0,0,.4) !important;
}
/* Dark canvas: focus ring + warm accent text/border conformance */
[data-skin-dark] { --ring-focus: 0 0 0 3px rgba(212,169,106,.30); }
[data-skin-dark] .text-accent-deep { color: var(--accent-deep) !important; }
[data-skin-dark] .text-brand-mid   { color: var(--brand-mid) !important; }
[data-skin-dark] .bg-brand-soft    { background: var(--brand-soft) !important; }
[data-skin-dark] .border-divider-soft { border-color: var(--divider-soft) !important; }

/* hidden scrollbars inside the app frame (scroll still works) */
.cn-scroll { scrollbar-width: none; -ms-overflow-style: none; }
.cn-scroll::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* generic fade/slide for screen transitions */
@keyframes cn-screen-in { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: translateY(0) } }
.cn-screen-in { animation: cn-screen-in .28s cubic-bezier(.22,.61,.36,1); }
@keyframes cn-pop { from { opacity: 0; transform: scale(.96) } to { opacity: 1; transform: scale(1) } }
@keyframes cn-spin { to { transform: rotate(360deg) } }
.cn-spin { animation: cn-spin 1.1s linear infinite; transform-origin: center; }

/* top-down notification shade + toast */
@keyframes cn-shade-down { from { transform: translateY(-101%) } to { transform: translateY(0) } }
.cn-shade-down { animation: cn-shade-down .34s cubic-bezier(.22,.61,.36,1); }
@keyframes cn-toast-in { from { opacity: 0; transform: translateY(10px) scale(.96) } to { opacity: 1; transform: translateY(0) scale(1) } }
.cn-toast-in { animation: cn-toast-in .26s cubic-bezier(.34,1.4,.64,1); }