/*
 * TinyWoolf Studio design tokens.
 * Brand values match tinywoolf.com (verified 3 November 2026), adapted to a calm,
 * productive app scale. Everything else in app.css builds on these.
 *
 * Light is the default. static/js/theme.js sets data-theme on <html> before the page
 * paints, from the person's saved choice or their system setting.
 */
:root {
  color-scheme: light;

  /* Brand */
  --tw-paper: #F7F5F1;
  --tw-ink: #1E1E1E;
  --tw-blue: #3663E4;
  --tw-sand: #B7A99A;

  /* Surfaces */
  --surface-page: var(--tw-paper);
  --surface: #FFFFFF;
  --surface-hover: #FAF9F6;
  --surface-sunken: #EFECE6;
  --surface-column: #EFECE6;
  --surface-topbar: rgba(255, 255, 255, 0.86);

  /* Text */
  --text: var(--tw-ink);
  --text-muted: #5C5B58;
  --text-on-primary: #FFFFFF;
  --link: #2A50C4;

  /* Lines. Control borders are strong enough for 3:1 against white. */
  --border: rgba(30, 30, 30, 0.11);
  --border-strong: rgba(30, 30, 30, 0.2);
  --border-control: rgba(30, 30, 30, 0.5);

  /* Actions and focus */
  --primary: var(--tw-blue);
  --primary-hover: #2B51C6;
  --primary-tint: #E8EDFC;
  --focus-ring: var(--tw-blue);
  --danger: #A3231B;
  --danger-hover: #861C15;
  --danger-solid: #A3231B;
  --danger-tint: #FBE9E7;

  /* Feedback */
  --toast-bg: #1E1E1E;
  --toast-text: #FFFFFF;
  --backdrop: rgba(30, 30, 30, 0.32);

  /* Workflow status. Always shown with a text label, never colour alone. */
  --status-todo-text: #4A4A46;
  --status-todo-bg: #ECE9E2;
  --status-in_progress-text: #2447B3;
  --status-in_progress-bg: #E7ECFB;
  --status-internal_review-text: #5B3FA6;
  --status-internal_review-bg: #EFEAFA;
  --status-waiting_client-text: #7A4E00;
  --status-waiting_client-bg: #FBF0D9;
  --status-done-text: #1C6B45;
  --status-done-bg: #E3F2EA;

  /* Avatar tones, picked from the person's name so everyone keeps one colour. */
  --tone-0-bg: #E7ECFB; --tone-0-text: #2447B3;
  --tone-1-bg: #E3F2EA; --tone-1-text: #1C6B45;
  --tone-2-bg: #FBF0D9; --tone-2-text: #7A4E00;
  --tone-3-bg: #EFEAFA; --tone-3-text: #5B3FA6;
  --tone-4-bg: #FBE9E7; --tone-4-text: #A3231B;
  --tone-5-bg: #E2F1F4; --tone-5-text: #155E6E;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  /* Typography */
  --font-heading: "effra-cc", Arial, sans-serif;
  --font-body: "neue-haas-grotesk-text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-md: 14px;
  --text-base: 15px;
  --text-lg: 17px;
  --text-xl: 20px;
  --text-2xl: 26px;
  --text-3xl: 30px;
  /* The font kit includes only these two weights. */
  --weight-regular: 400;
  --weight-strong: 700;

  /* Shape and depth */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;
  --shadow-card: 0 1px 2px rgba(30, 30, 30, 0.04), 0 1px 3px rgba(30, 30, 30, 0.05);
  --shadow-raised: 0 4px 12px rgba(30, 30, 30, 0.1), 0 1px 3px rgba(30, 30, 30, 0.06);
  --shadow-menu: 0 8px 24px rgba(30, 30, 30, 0.14);
  --shadow-panel: -8px 0 32px rgba(30, 30, 30, 0.14);
  --ease: cubic-bezier(0.2, 0, 0, 1);

  /* Controls. Every input, select and button uses one of these two heights. */
  --control-h: 38px;
  --control-h-sm: 32px;
  --control-px: 12px;
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%235C5B58' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  /* Layout */
  --page-max: 1320px;
  --page-max-wide: 1560px;
  --page-max-narrow: 680px;
  --topbar-height: 60px;
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --surface-page: #141413;
  --surface: #1E1E1C;
  --surface-hover: #252523;
  --surface-sunken: #2C2B29;
  --surface-column: #191917;
  --surface-topbar: rgba(24, 24, 22, 0.86);

  --text: #ECEAE6;
  --text-muted: #A8A6A0;
  --text-on-primary: #FFFFFF;
  --link: #93AEFF;

  --border: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.16);
  --border-control: rgba(255, 255, 255, 0.4);

  --primary: #3D6AEB;
  --primary-hover: #5A80F0;
  --primary-tint: #212B48;
  --focus-ring: #93AEFF;
  --danger: #FF9B91;
  --danger-hover: #FFB4AC;
  --danger-solid: #C2382E;
  --danger-tint: #3A1E1C;

  --toast-bg: #ECEAE6;
  --toast-text: #141413;
  --backdrop: rgba(0, 0, 0, 0.55);

  --status-todo-text: #CFCCC5;
  --status-todo-bg: #2F2E2B;
  --status-in_progress-text: #A3B9FF;
  --status-in_progress-bg: #1F2A4A;
  --status-internal_review-text: #CBB8FF;
  --status-internal_review-bg: #2D2546;
  --status-waiting_client-text: #F3C873;
  --status-waiting_client-bg: #382C13;
  --status-done-text: #84D6A9;
  --status-done-bg: #173225;

  --tone-0-bg: #1F2A4A; --tone-0-text: #A3B9FF;
  --tone-1-bg: #173225; --tone-1-text: #84D6A9;
  --tone-2-bg: #382C13; --tone-2-text: #F3C873;
  --tone-3-bg: #2D2546; --tone-3-text: #CBB8FF;
  --tone-4-bg: #3A1E1C; --tone-4-text: #FF9B91;
  --tone-5-bg: #14343B; --tone-5-text: #7FD3E3;

  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23A8A6A0' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-raised: 0 6px 16px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-menu: 0 10px 28px rgba(0, 0, 0, 0.55);
  --shadow-panel: -8px 0 32px rgba(0, 0, 0, 0.5);
}