@import 'tailwindcss';

@custom-variant dark (&:where(.app-dark, .app-dark *));

@theme {
  /* Display = Bricolage Grotesque (characterful grotesque), body = IBM Plex Sans */
  --font-sans: 'IBM Plex Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-display: 'Bricolage Grotesque', 'IBM Plex Sans', Helvetica, Arial, sans-serif;

  /* Blurple — brand primary, remaps every indigo-* utility */
  --color-indigo-50: #eef0fe;
  --color-indigo-100: #dfe3fd;
  --color-indigo-200: #c3cafb;
  --color-indigo-300: #9ba6f8;
  --color-indigo-400: #7b88f5;
  --color-indigo-500: #5865f2;
  --color-indigo-600: #4551e0;
  --color-indigo-700: #3742b8;
  --color-indigo-800: #29328c;
  --color-indigo-900: #1e2353;
  --color-indigo-950: #0a0d3a;

  /* Legacy purple-* aliases → Blurple, so untouched views follow the brand */
  --color-purple-50: #eef0fe;
  --color-purple-100: #dfe3fd;
  --color-purple-200: #c3cafb;
  --color-purple-300: #9ba6f8;
  --color-purple-400: #7b88f5;
  --color-purple-500: #5865f2;
  --color-purple-600: #4551e0;
  --color-purple-700: #3742b8;
  --color-purple-800: #29328c;
  --color-purple-900: #1e2353;
  --color-purple-950: #0a0d3a;

  /* Magenta — the playful counterweight (badges, folder marks, focus art) */
  --color-fuchsia-400: #f26bcb;
  --color-fuchsia-500: #ec48bd;
  --color-fuchsia-600: #d32ba1;

  /* Electric green — highest-intent only */
  --color-green-50: #e8fdf1;
  --color-green-100: #c7f9dd;
  --color-green-200: #8df3bb;
  --color-green-300: #56ef9c;
  --color-green-400: #35ed7e;
  --color-green-500: #1cc963;
  --color-green-600: #14a151;
  --color-green-700: #0f7c3f;
  --color-green-800: #0b562d;
  --color-green-900: #073a1f;
  --color-green-950: #042313;

  /* Warm neutral stones — remaps every slate-* utility (no indigo tint) */
  --color-slate-50: #f8f7f4;
  --color-slate-100: #f0eee9;
  --color-slate-200: #e5e2db;
  --color-slate-300: #cfcbc2;
  --color-slate-400: #a3a09a;
  --color-slate-500: #6e6b66;
  --color-slate-600: #52504c;
  --color-slate-700: #3b3a37;
  --color-slate-800: #26262a;
  --color-slate-900: #17181c;
  --color-slate-950: #0e0f12;

  --shadow-subtle: rgba(28, 25, 20, 0.08) 0 8px 32px;
  --shadow-micro: rgba(28, 25, 20, 0.05) 0 1px 2px;
}

:root {
  --font-family: var(--font-sans);
  --ink: #17181c;
  --ink-muted: #6e6b66;
  --primary: #5865f2;
  --magenta: #ec48bd;
  --canvas: #f8f7f4;
  --panel: #ffffff;
  --hairline: #e5e2db;
  --primary-soft: rgba(88, 101, 242, 0.1);
}

.app-dark {
  --ink: #f3f2ef;
  --ink-muted: #a3a09a;
  --canvas: #0e0f12;
  --panel: #17191e;
  --hairline: #2c2f36;
  --primary-soft: rgba(123, 136, 245, 0.18);
}

@layer base {
  body {
    font-family: var(--font-family);
    background: var(--canvas);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  #app {
    height: 100dvh;
  }

  a {
    color: var(--primary);
    text-decoration: none;
  }

  :focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
  }

  /* CKEditor: fill its container, no fixed height */
  .ck.ck-editor {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
  }

  .ck.ck-editor__main {
    display: flex;
    min-height: 0;
    flex: 1;
    overflow: auto;
  }

  .ck-editor__editable {
    min-height: 100%;
  }

  .ck.ck-editor__editable_inline {
    width: 100% !important;
    padding: 20px !important;
    border: 1px solid var(--hairline) !important;
    border-radius: 0 0 12px 12px !important;
  }

  .ck.ck-toolbar {
    border-radius: 0 !important;
  }

  .ck.ck-editor__editable_inline.ck-focused {
    box-shadow: none !important;
  }

  /* No max-width here: CKEditor puts this class on the live editable too — capping
     it would re-center and narrow the edit area. Read-view width lives on .document-content. */
  .ck-content {
    font-size: 16px;
    line-height: 1.65;
  }

  .ck-content h2 {
    font-family: var(--font-display);
    font-weight: 700;
  }

  .ck-content h3,
  .ck-content h4 {
    font-family: var(--font-display);
    font-weight: 600;
  }

  .ck-content ol,
  .ck-content ul {
    padding-inline-start: 40px;
  }

  .ck-content li {
    margin-bottom: 2px;
  }

  .app-dark .ck.ck-editor {
    --ck-color-base-background: #0e0f12;
    --ck-color-base-border: #2c2f36;
    --ck-color-base-text: #f3f2ef;
    --ck-color-text: #f3f2ef;
    --ck-color-focus-border: #5865f2;
    --ck-color-toolbar-background: #17191e;
    --ck-color-toolbar-border: #2c2f36;
    --ck-color-dropdown-panel-background: #17191e;
    --ck-color-panel-background: #17191e;
    --ck-color-panel-border: #2c2f36;
    --ck-color-button-default-hover-background: #2c2f36;
    --ck-color-button-default-active-background: #2c2f36;
    --ck-color-button-on-background: #2c2f36;
    --ck-color-input-background: #0e0f12;
    --ck-color-input-border: #2c2f36;
    --ck-color-input-text: #f3f2ef;
    --ck-color-tooltip-background: #2c2f36;
    --ck-color-tooltip-text: #f3f2ef;
    --ck-color-table-border: #52504c;
    --ck-color-link-default: #9ba6f8;
  }
}

@layer components {
  .field {
    @apply mb-4;
  }

  .field > label {
    @apply mb-1.5 block text-[12px] font-semibold uppercase tracking-[0.08em];
    color: var(--ink-muted);
  }

  .page-title {
    font-family: var(--font-display);
    font-size: clamp(26px, 2.6vw, 36px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.025em;
    color: var(--ink);
  }

  .page-subtitle {
    font-size: 14px;
    line-height: 1.55;
    color: var(--ink-muted);
  }

  .muted-note {
    font-size: 13px;
    line-height: 1.5;
    color: var(--ink-muted);
  }

  /* Eyebrow: small caps label above a title */
  .eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-muted);
  }

  .table-title {
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--ink);
  }

  /* Surface card used outside PrimeVue <Card> */
  .panel {
    background: var(--panel);
    border: 1px solid var(--hairline);
    border-radius: 14px;
    box-shadow: var(--shadow-micro);
  }

  /* Table headers read as quiet eyebrows, not rows of body text */
  .p-datatable .p-datatable-header-cell,
  .p-treetable .p-treetable-header-cell {
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
  }

  .search-input.p-inputtext,
  .search-input.p-select {
    border-radius: 12px !important;
  }

  /* Numeric columns line up table to table */
  .p-datatable-table,
  .p-treetable-table {
    font-variant-numeric: tabular-nums;
  }

  /* Restrained "blurple" is an accent, not a wash */
  ::selection {
    background: var(--primary-soft);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}