@import "tailwindcss";
@import "tailwindcss-safe-area";
@import "lightgallery/css/lightgallery.css";

@source "../../../lib/platinum";

/* ================================================================
   SiteForce Design Tokens — Tailwind v4

   Three colour scales are defined here. Never use Tailwind's
   built-in gray / slate / zinc / sky / blue / amber in this project.

   brand-*   Sky-900 structural colour   — sidebar, header, nav
   action-*  Hi-vis amber primary CTA    — buttons, focus rings, badges
   ink-*     Blue-tinted true dark       — dark-mode backgrounds (#0b1018)

   Typography:
   font-display  Barlow Condensed — headings, labels, button text
   font-sans     Barlow           — body, inputs, helper text

   Touch targets:
   touch-target     56px min-height (standard interactive elements)
   touch-target-xl  72px min-height (primary CTAs)
   check-32         32×32px checkbox / radio controls
   ================================================================ */

@theme {
  /* --- Brand: Sky-900 (structural — sidebar, header, brand moments) --- */
  --color-brand-50:  oklch(0.95 0.02 240);
  --color-brand-100: oklch(0.90 0.04 240);
  --color-brand-200: oklch(0.80 0.06 240);
  --color-brand-300: oklch(0.70 0.07 240);
  --color-brand-400: oklch(0.60 0.08 240);
  --color-brand-500: oklch(0.50 0.09 240);
  --color-brand-600: oklch(0.45 0.09 240);
  --color-brand-700: oklch(0.391 0.09 240.876); /* sky-900 — the structural brand colour */
  --color-brand-800: oklch(0.33 0.08 240);
  --color-brand-900: oklch(0.27 0.07 240);
  --color-brand-950: oklch(0.20 0.05 240);

  /* --- Action: Hi-vis amber (primary CTA — one per screen maximum) ---
     Workers instinctively trust amber: safety vests, barriers, warning signs.
     Use bg-action / text-action for the primary action on any screen.        */
  --color-action:     oklch(0.87 0.19 90); /* → bg-action, text-action (the primary) */
  --color-action-50:  oklch(0.98 0.04 90);
  --color-action-100: oklch(0.95 0.09 90);
  --color-action-200: oklch(0.91 0.14 90);
  --color-action-300: oklch(0.87 0.19 90); /* same as action DEFAULT */
  --color-action-400: oklch(0.78 0.18 90);
  --color-action-500: oklch(0.68 0.17 90);
  --color-action-600: oklch(0.58 0.15 90);
  --color-action-700: oklch(0.48 0.13 90);
  --color-action-800: oklch(0.38 0.10 90);
  --color-action-900: oklch(0.28 0.07 90);

  /* --- Ink: Blue-tinted true dark (not just grey — #0b1018)
     Hi-vis amber pops hard against this background.
     Used for all dark-mode surfaces and backgrounds.             --- */
  --color-ink-950: #060a10;
  --color-ink-900: #0b1018; /* primary dark background */
  --color-ink-800: #111c2b;
  --color-ink-700: #1a2a3d;
  --color-ink-600: #243a52;
  --color-ink-500: #2f4d6b;
  --color-ink-400: #3d6285;
  --color-ink-300: #5a85a8;
  --color-ink-200: #82aac6;
  --color-ink-100: #b8d0e0;
  --color-ink-50:  #e8f1f7;

  /* --- Typography --- */
  --font-display: "Barlow Condensed", system-ui, sans-serif;
  --font-sans:    Barlow, system-ui, sans-serif;

  /* Font sizes — 18px minimum for body text (dirty screens read at arm's length) */
  --text-xs:              0.875rem; /* 14px — captions and metadata only */
  --text-xs--line-height: 1.4;
  --text-sm:              1rem;     /* 16px */
  --text-sm--line-height: 1.4;
  --text-base:            1.125rem; /* 18px — minimum body text */
  --text-base--line-height: 1.5;
  --text-lg:              1.375rem; /* 22px */
  --text-lg--line-height: 1.4;
  --text-xl:              1.75rem;  /* 28px */
  --text-xl--line-height: 1.2;
  --text-2xl:             2.25rem;  /* 36px */
  --text-2xl--line-height: 1.1;
  --text-3xl:             3rem;     /* 48px */
  --text-3xl--line-height: 1.0;
  --text-4xl:             3.5rem;   /* 56px */
  --text-4xl--line-height: 1.0;
  --text-5xl:             4rem;     /* 64px */
  --text-5xl--line-height: 1.0;
}

/* ================================================================
   Touch target utilities — designed for gloved hands and dirty screens.
   Wrap any interactive element (nav item, button, list row) in one of these.
   ================================================================ */

@utility touch-target {
  min-height: 56px;
  display: flex;
  align-items: center;
}

@utility touch-target-xl {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 32×32px checkbox / radio control — always wrap in a touch-target label */
@utility check-32 {
  width: 32px;
  height: 32px;
  min-width: 32px;
  cursor: pointer;
  accent-color: oklch(0.87 0.19 90);
}

/* Active nav indicator — hi-vis amber left rule */
@utility nav-link-active {
  position: relative;
  &::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.25rem;
    bottom: 0.25rem;
    width: 4px;
    border-radius: 0 4px 4px 0;
    background: oklch(0.87 0.19 90);
  }
}

/* Scrollbar for nav */
@utility nav-scroll {
  &::-webkit-scrollbar { width: 4px; }
  &::-webkit-scrollbar-track { background: transparent; }
  &::-webkit-scrollbar-thumb { background: oklch(0.5 0.07 240); border-radius: 4px; }
}

/* ================================================================
   Component styles — moved from theme.css
   ================================================================ */

@layer base {
  html {
    font-size: 1em;
    font: -apple-system-body;
  }
  /* 56px minimum height for all form inputs */
  input[type="text"], input[type="email"], input[type="password"],
  input[type="tel"], input[type="url"], input[type="number"],
  input[type="date"], input[type="datetime-local"], input[type="time"],
  input[type="search"], input[type="file"],
  select, textarea {
    min-height: 56px;
  }
}

@layer components {
  /* Rails form error wrapper */
  .field_with_errors {
    background-color: oklch(97.1% 0.013 17.38);
    border-color: oklch(97.1% 0.013 17.38);
    border-width: 1px;
    border-radius: 2px;
    display: flex;
    flex-direction: column;
    gap: 1;
  }

  /* Trix rich text editor — compact toolbar */
  trix-toolbar {
    .trix-button-row { display: flex; flex-wrap: wrap; gap: 2px; }
    .trix-button-group { display: flex; gap: 0; margin: 0; border-radius: 8px; overflow: hidden; }
    .trix-button {
      min-height: 28px;
      width: 28px;
      padding: 2px;
      font-size: 0.875rem;
      border: none;
    }
    .trix-button--icon { width: 28px; height: 28px; }
    .trix-button--icon::before { margin: 4px; }
  }

  trix-editor {
    min-height: 56px;
    padding: 12px 16px;
    font-size: 1.125rem;
  }

  .trix-content a {
    text-decoration: underline;
    font-weight: bold;
    text-align: left;
  }

  .trix-content ol li { list-style: decimal none outside; }
  .trix-content ul li { list-style: square none outside; }
  .trix-content h1 { font-size: 1.4rem; font-weight: bold; }
  .trix-content h2 { font-size: 1.3rem; font-weight: bold; }
  .trix-content h3 { font-size: 1.2rem; font-weight: bold; }

  @media (prefers-color-scheme: dark) {
    trix-toolbar .trix-button { filter: invert(); }
    trix-editor { color: white; }
    trix-toolbar .trix-button:disabled { filter: invert() grayscale(1) brightness(2); }
    trix-toolbar .trix-button--icon::before { opacity: 1; }
    trix-toolbar .trix-button--icon:disabled::before { opacity: 0.5; }
  }

  /* Dropzone */
  .dropzone {
    border: none;
    border-radius: 0;
  }

  /* Inline rich-text editor inside tables */
  table tbody td.form-element-editor {
    trix-toolbar { display: none !important; }
    trix-editor { margin-top: 0.5rem; border: none; }
  }

  /* Shoelace drawer z-index */
  sl-drawer::part(base) { z-index: 10; }

  /* Card column break */
  .card { break-inside: avoid; }
}