@import 'tailwindcss';

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

@theme {
  /* Display = heavy geometric grotesque (DESIGN.md substitute for ABC Ginto Nord) */
  --font-sans: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-display: 'Hanken Grotesk', 'Inter', 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;

  /* Cool indigo-tinted neutrals — remaps every slate-* utility */
  --color-slate-50: #f6f7fb;
  --color-slate-100: #eef0f7;
  --color-slate-200: #dde0ed;
  --color-slate-300: #c1c6dd;
  --color-slate-400: #8e95b5;
  --color-slate-500: #666d92;
  --color-slate-600: #4a5177;
  --color-slate-700: #2d3358;
  --color-slate-800: #1e2353;
  --color-slate-900: #141840;
  --color-slate-950: #0a0d3a;

  --shadow-subtle: rgba(69, 42, 124, 0.1) 0px 3px 34px;
  --shadow-micro: rgba(20, 24, 64, 0.06) 0px 1px 3px;
}

:root {
  --font-family: var(--font-sans);
  --ink: #141840;
  --ink-muted: #666d92;
  --primary: #5865f2;
  --magenta: #ec48bd;
  --canvas: #f6f7fb;
  --panel: #ffffff;
  --hairline: #dde0ed;
  --primary-soft: rgba(88, 101, 242, 0.12);
}

.app-dark {
  --ink: #ffffff;
  --ink-muted: #8e95b5;
  --canvas: #0a0d3a;
  --panel: #141840;
  --hairline: #2d3358;
  --primary-soft: rgba(123, 136, 245, 0.2);
}

@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: #0a0d3a;
    --ck-color-base-border: #2d3358;
    --ck-color-base-text: #ffffff;
    --ck-color-text: #ffffff;
    --ck-color-focus-border: #5865f2;
    --ck-color-toolbar-background: #141840;
    --ck-color-toolbar-border: #2d3358;
    --ck-color-dropdown-panel-background: #141840;
    --ck-color-panel-background: #141840;
    --ck-color-panel-border: #2d3358;
    --ck-color-button-default-hover-background: #2d3358;
    --ck-color-button-default-active-background: #2d3358;
    --ck-color-button-on-background: #2d3358;
    --ck-color-input-background: #0a0d3a;
    --ck-color-input-border: #2d3358;
    --ck-color-input-text: #ffffff;
    --ck-color-tooltip-background: #2d3358;
    --ck-color-tooltip-text: #ffffff;
    --ck-color-table-border: #4a5177;
    --ck-color-link-default: #9ba6f8;
  }
}

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

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

  .page-title {
    font-family: var(--font-display);
    font-size: clamp(28px, 3vw, 38px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--ink);
  }

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

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

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

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

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

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

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