/* ============================================================
   Tailwind Base
   ============================================================ */
@import "tailwindcss";

/* ============================================================
   Source Paths
   ============================================================ */
@source "../../HQ/templates/**/*.html";
@source "../../AR/templates/**/*.html";
@source "../../KC/templates/**/*.html";
@source "../../KEL/templates/**/*.html";
@source "../../GL/templates/**/*.html";
@source "../../accounts/templates/**/*.html";
@source "../../templates/**/*.html";
@source "../js/**/*.js";

/* ============================================================
   Font Tokens
   ============================================================ */
@theme {
  --font-sans:
    "Geist",
    system-ui,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif;

  --font-mono:
    "DM Mono",
    ui-monospace,
    monospace;
}

/* ============================================================
   Plugins
   ============================================================ */
@plugin "@iconify/tailwind4";

@plugin "daisyui" {
  themes: all;
}

/* ============================================================
   LIGHT THEME — Kedai Corp
   ============================================================ */
@plugin "daisyui/theme" {
  name: "light";

  default: true;
  prefersdark: false;
  color-scheme: "light";

  /* ── Base ─────────────────────────────────────────────── */
  --color-base-100: oklch(100% 0 0);
  --color-base-200: oklch(96% 0.004 240);
  --color-base-300: oklch(90% 0.010 240);
  --color-base-content: oklch(20% 0.055 258);

  /* ── Brand ────────────────────────────────────────────── */
  --color-primary: oklch(32% 0.110 258);
  --color-primary-content: oklch(98% 0.003 247);

  --color-secondary: oklch(74% 0.150 70);
  --color-secondary-content: oklch(18% 0.040 70);

  --color-accent: oklch(56% 0.135 152);
  --color-accent-content: oklch(98% 0.003 150);

  --color-neutral: oklch(34% 0.070 258);
  --color-neutral-content: oklch(98% 0.003 247);

  /* ── Semantic ─────────────────────────────────────────── */
  --color-info: oklch(70% 0.130 220);
  --color-info-content: oklch(98% 0.003 247);

  --color-success: oklch(58% 0.140 150);
  --color-success-content: oklch(98% 0.003 150);

  --color-warning: oklch(76% 0.170 72);
  --color-warning-content: oklch(100% 0 0);

  --color-error: oklch(56% 0.190 28);
  --color-error-content: oklch(98% 0.003 25);

  /* ── Shape ────────────────────────────────────────────── */
  --radius-selector: 0.35rem;
  --radius-field: 0.5rem;
  --radius-box: 0.85rem;

  --border: 1px;
  --depth: 2;
  --noise: 0;
}

/* ============================================================
   DARK THEME — Kedai Corp
   ============================================================ */
@plugin "daisyui/theme" {
  name: "dark";

  default: false;
  prefersdark: true;
  color-scheme: "dark";

  /* ── Base ─────────────────────────────────────────────── */
  --color-base-100: oklch(22% 0.060 258);
  --color-base-200: oklch(17% 0.045 258);
  --color-base-300: oklch(28% 0.050 258);
  --color-base-content: oklch(92% 0.015 240);

  /* ── Brand ────────────────────────────────────────────── */
  --color-primary: oklch(78% 0.165 72);
  --color-primary-content: oklch(18% 0.040 70);

  --color-secondary: oklch(36% 0.060 258);
  --color-secondary-content: oklch(92% 0.015 240);

  --color-accent: oklch(62% 0.135 152);
  --color-accent-content: oklch(98% 0.003 150);

  --color-neutral: oklch(30% 0.040 258);
  --color-neutral-content: oklch(92% 0.015 240);

  /* ── Semantic ─────────────────────────────────────────── */
  --color-info: oklch(72% 0.135 220);
  --color-info-content: oklch(98% 0.003 247);

  --color-success: oklch(64% 0.145 150);
  --color-success-content: oklch(98% 0.003 150);

  --color-warning: oklch(80% 0.180 72);
  --color-warning-content: oklch(18% 0.040 70);

  --color-error: oklch(62% 0.190 28);
  --color-error-content: oklch(98% 0.003 25);

  /* ── Shape ────────────────────────────────────────────── */
  --radius-selector: 0.35rem;
  --radius-field: 0.5rem;
  --radius-box: 0.85rem;

  --border: 1px;
  --depth: 2;
  --noise: 0;
}

/* ============================================================
   Base Layer
   ============================================================ */
@layer base {

  html {
    font-family: var(--font-sans);
    font-size: 16px;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    scroll-behavior: smooth;
  }

  body {
    @apply bg-base-200 text-base-content;

    font-family: var(--font-sans);
    color-scheme: light dark;
  }

  h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    letter-spacing: -0.02em;
  }

  code,
  kbd,
  pre,
  samp {
    font-family: var(--font-mono);
  }

  * {
    transition:
      background-color .18s ease,
      border-color .18s ease,
      color .18s ease;
  }

  ::selection {
    background:
      color-mix(
        in oklab,
        var(--color-primary) 22%,
        transparent
      );
  }

  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  ::-webkit-scrollbar-thumb {
    background:
      color-mix(
        in oklab,
        var(--color-base-content) 18%,
        transparent
      );

    border-radius: 999px;
  }

  ::-webkit-scrollbar-thumb:hover {
    background:
      color-mix(
        in oklab,
        var(--color-primary) 32%,
        transparent
      );
  }
}

/* ============================================================
   Components Layer
   ============================================================ */
@layer components {

  /* ───────────────────────────────────────────────────────
     Surface System
     ─────────────────────────────────────────────────────── */
  .surface {
    @apply bg-base-100 border border-base-300;

    box-shadow:
      0 1px 2px rgba(0,0,0,.04),
      0 8px 24px rgba(0,0,0,.06);
  }

  [data-theme="dark"] .surface {
    box-shadow:
      0 1px 2px rgba(0,0,0,.28),
      0 12px 28px rgba(0,0,0,.38);
  }

  /* ───────────────────────────────────────────────────────
     Form Controls
     ─────────────────────────────────────────────────────── */
  .input,
  .select,
  .textarea,
  .file-input {
    @apply bg-base-100 border-base-300 text-base-content;

    border-width: 1px;

    box-shadow:
      0 1px 2px rgba(0,0,0,.03);

    transition:
      border-color .18s ease,
      box-shadow .18s ease,
      background-color .18s ease;

    font-weight: 500;
  }

  .input:hover,
  .select:hover,
  .textarea:hover,
  .file-input:hover {
    border-color:
      color-mix(
        in oklab,
        var(--color-primary) 22%,
        var(--color-base-300)
      );
  }

  .input:focus,
  .select:focus,
  .textarea:focus,
  .file-input:focus {

    outline: none;
    outline-offset: 2px;

    border-color: var(--color-primary);

    box-shadow:
      0 0 0 4px color-mix(
        in oklab,
        var(--color-primary) 14%,
        transparent
      ),
      0 1px 2px rgba(0,0,0,.04);
  }

  .input::placeholder,
  .textarea::placeholder {
    color:
      color-mix(
        in oklab,
        var(--color-base-content) 45%,
        transparent
      );

    font-weight: 400;
  }

  .input:disabled,
  .select:disabled,
  .textarea:disabled,
  .file-input:disabled {
    opacity: .72;
    cursor: not-allowed;

    box-shadow: none;
  }

  .input-error,
  .select-error,
  .textarea-error {
    border-color: var(--color-error) !important;

    box-shadow:
      0 0 0 4px color-mix(
        in oklab,
        var(--color-error) 14%,
        transparent
      );
  }

  .input-success,
  .select-success,
  .textarea-success {
    border-color: var(--color-success) !important;

    box-shadow:
      0 0 0 4px color-mix(
        in oklab,
        var(--color-success) 14%,
        transparent
      );
  }

  .label-text {
    font-weight: 600;
    letter-spacing: -.01em;
  }

  .label-text-alt {
    font-size: .75rem;

    color:
      color-mix(
        in oklab,
        var(--color-base-content) 60%,
        transparent
      );
  }

  .file-input::file-selector-button {
    border: none;

    background:
      color-mix(
        in oklab,
        var(--color-primary) 12%,
        white
      );

    color: var(--color-primary);

    font-weight: 600;
  }

  .checkbox,
  .radio,
  .toggle {
    transition: all .16s ease;
  }

  .checkbox:checked,
  .radio:checked,
  .toggle:checked {
    box-shadow:
      0 0 0 4px color-mix(
        in oklab,
        var(--color-primary) 12%,
        transparent
      );
  }

  /* ───────────────────────────────────────────────────────
     Card
     ─────────────────────────────────────────────────────── */
  .card {
    border:
      1px solid
      color-mix(
        in oklab,
        var(--color-base-300) 65%,
        transparent
      );

    transition:
      transform .18s ease,
      box-shadow .18s ease;
  }

  .card:hover {
    transform: translateY(-1px);
  }

  /* ───────────────────────────────────────────────────────
     Table
     ─────────────────────────────────────────────────────── */
  .table tbody tr {
    transition: background-color .14s ease;
  }

  .table tbody tr:hover {
    background:
      color-mix(
        in oklab,
        var(--color-primary) 5%,
        transparent
      );
  }

  /* ───────────────────────────────────────────────────────
     Badge
     ─────────────────────────────────────────────────────── */
  .badge {
    font-weight: 600;
    letter-spacing: .01em;
  }

  /* ───────────────────────────────────────────────────────
     Menu Active
     ─────────────────────────────────────────────────────── */
  .menu li > *:not(ul):not(.menu-title).active {
    background:
      color-mix(
        in oklab,
        var(--color-primary) 16%,
        transparent
      );

    color: var(--color-primary);

    font-weight: 600;
  }

  /* ───────────────────────────────────────────────────────
     Autofill
     ─────────────────────────────────────────────────────── */
  input:-webkit-autofill,
  input:-webkit-autofill:hover,
  input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--color-base-content);

    transition:
      background-color 9999s ease-in-out 0s;
  }
}