/* ════════════════════════════════════════════════════════════════
   AICRAM STUDIO — DESIGN TOKENS
   Single source of truth for visual style. Shared by the public site
   (#/) and the staff panel (#/equipa). Never hard-code a colour or
   font elsewhere — reference these custom properties.
   ════════════════════════════════════════════════════════════════ */

:root {
  /* ── Surfaces ─────────────────────────────────────────────── */
  --c-bg:        #faf8f4;   /* page background (sand)            */
  --c-bg-2:      #f4f0e8;   /* alt section background           */
  --c-surface:   #ffffff;   /* cards, modals                    */
  --c-bg-dark:   #1a1814;   /* dark sections / sidebar          */
  --c-darker:    #141210;

  /* ── Ink ──────────────────────────────────────────────────── */
  --c-dark:      #1c1a17;   /* near-black brand ink             */
  --c-text-1:    #1c1a17;   /* primary text                     */
  --c-text-2:    #6b6459;   /* secondary text                   */
  --c-text-3:    #a89d92;   /* muted / captions                 */

  /* ── Brand accents ────────────────────────────────────────── */
  --c-accent:    #b8896a;   /* copper — primary action          */
  --c-accent-l:  #d4a882;   /* lighter copper                   */
  --c-gold:      #c9a962;   /* gold — highlights, premium        */

  /* ── Status ───────────────────────────────────────────────── */
  --c-success:   #4a7c59;
  --c-warning:   #b8860b;
  --c-error:     #a64032;
  --c-info:      #2e6b8a;

  /* ── Lines ────────────────────────────────────────────────── */
  --c-border:    rgba(0, 0, 0, 0.07);
  --c-border-2:  rgba(184, 137, 106, 0.22);
  --c-border-s:  rgba(255, 255, 255, 0.08);  /* on dark          */

  /* ── Type ─────────────────────────────────────────────────── */
  --f-serif: 'Cormorant Garamond', Georgia, serif;
  --f-sans:  'DM Sans', system-ui, sans-serif;

  /* ── Radii ────────────────────────────────────────────────── */
  --r-sm: 6px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 32px;
  --r-2xl: 48px;

  /* ── Spacing scale ────────────────────────────────────────── */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 20px;  --s-6: 24px;  --s-8: 32px;  --s-10: 40px;
  --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px;

  /* ── Elevation ────────────────────────────────────────────── */
  --shadow-sm: 0 2px 12px rgba(28, 26, 23, 0.05);
  --shadow-md: 0 12px 40px rgba(28, 26, 23, 0.09);
  --shadow-lg: 0 28px 80px rgba(28, 26, 23, 0.14);

  /* ── Motion ───────────────────────────────────────────────── */
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-silk:   cubic-bezier(0.25, 0.46, 0.45, 0.94);

  /* ── Layout ───────────────────────────────────────────────── */
  --sidebar-w: 264px;
  --topbar-h:  64px;
  --maxw:      1320px;

  /* ── Staff density (driven by Tweaks) ─────────────────────── */
  --row-py: 13px;
  --card-pad: 22px;
}

/* Comfortable / compact density variants for the staff panel */
[data-density="compact"] {
  --row-py: 8px;
  --card-pad: 16px;
}

/* ── Dark theme (Tweaks toggle). Public dark sections stay dark
   regardless; this remaps the light shell to a warm dark mode. ── */
[data-theme="dark"] {
  --c-bg:       #1a1814;
  --c-bg-2:     #211e1a;
  --c-surface:  #232019;
  --c-text-1:   #f4efe7;
  --c-text-2:   #c7bcab;
  --c-text-3:   #8a8073;
  --c-border:   rgba(255, 255, 255, 0.09);
  --c-border-2: rgba(212, 168, 130, 0.28);
  --shadow-sm:  0 2px 12px rgba(0, 0, 0, 0.3);
  --shadow-md:  0 12px 40px rgba(0, 0, 0, 0.4);
  --shadow-lg:  0 28px 80px rgba(0, 0, 0, 0.5);
}

/* ════════════════════════════════════════════════════════════════
   RESET + PRIMITIVES
   ════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--f-sans);
  font-weight: 300;
  background: var(--c-bg);
  color: var(--c-text-1);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background 0.4s var(--ease-silk), color 0.4s var(--ease-silk);
}

h1, h2, h3, h4, h5 { font-family: var(--f-serif); font-weight: 400; line-height: 1.15; }
a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }
button { font-family: var(--f-sans); cursor: pointer; border: none; background: none; }
input, select, textarea { font-family: var(--f-sans); }
:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }

/* Shared utility: eyebrow label */
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--s-3);
  font-family: var(--f-sans);
  font-size: 10px; font-weight: 500; letter-spacing: 3px;
  text-transform: uppercase; color: var(--c-accent);
}
.eyebrow::before { content: ''; width: 30px; height: 1px; background: currentColor; }

/* Visually-hidden but screen-reader accessible */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--s-6); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}