/* static/css/app.css — Rakeezah Knowledge Hub theme
   Simplified version of the main Rakeezah app's theme.
   Same brand colors (wood/green/gold), Rubik font, warm feel. */


/* ─── Brand Theme (DaisyUI 5 oklch format) ─── */
/* oklch(L C H) = Lightness (0-1), Chroma (saturation), Hue (angle).
   These match the main Rakeezah app exactly. */

[data-theme="rakeezah"] {
  color-scheme: light;

  /* Primary: Wood brown — warm, approachable */
  --color-primary: oklch(0.4828 0.0302 63.18);           /* #6B5B4D */
  --color-primary-content: oklch(1 0 0);                  /* white */

  /* Secondary: Green — growth, impact */
  --color-secondary: oklch(0.6270 0.1699 149.21);        /* #16A34A */
  --color-secondary-content: oklch(1 0 0);                /* white */

  /* Accent: Gold — highlights, achievements */
  --color-accent: oklch(0.6658 0.1574 58.31);            /* #D97706 */
  --color-accent-content: oklch(1 0 0);                   /* white */

  /* Base: Off-white background */
  --color-base-100: oklch(0.9851 0 0);                    /* #FAFAFA — page bg */
  --color-base-200: oklch(0.9674 0.0013 288.45);          /* #F4F4F5 — secondary bg */
  --color-base-300: oklch(1 0 0);                          /* #FFFFFF — cards */
  --color-base-content: oklch(0.2077 0.0398 265.77);      /* #0F172A — dark text */

  /* Neutral: Dark navy — headings, emphasis */
  --color-neutral: oklch(0.2077 0.0398 265.77);           /* #0F172A */
  --color-neutral-content: oklch(1 0 0);                   /* white */

  /* Feedback colors */
  --color-success: oklch(0.6270 0.1699 149.21);           /* #16A34A green */
  --color-success-content: oklch(1 0 0);
  --color-error: oklch(0.5771 0.2152 27.33);              /* #DC2626 red */
  --color-error-content: oklch(1 0 0);
  --color-warning: oklch(0.6658 0.1574 58.31);            /* #D97706 gold */
  --color-warning-content: oklch(1 0 0);
  --color-info: oklch(0.6065 0.1826 256.85);              /* #3B82F6 blue */
  --color-info-content: oklch(1 0 0);

  /* Border radius — slightly rounded, not pill-shaped */
  --radius-box: 0.5rem;
  --radius-btn: 0.375rem;
  --radius-badge: 1rem;
}


/* ─── Typography ─── */
/* Rubik = brand font (Arabic + Latin). Arabic needs generous line-height (1.6)
   because Arabic script has taller glyphs and diacritics than Latin. */

body {
  font-family: 'Rubik', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  line-height: 1.6;
  letter-spacing: 0.3px;
}

h1, h2, h3, h4, h5, h6 {
  line-height: 1.25;
  letter-spacing: -0.3px;
  font-feature-settings: 'kern' 1;
}
h1 { font-size: 2rem; font-weight: 700; }
h2 { font-size: 1.5rem; font-weight: 600; }
h3 { font-size: 1.25rem; font-weight: 600; }
h4 { font-size: 1.125rem; font-weight: 500; }


/* ─── Progress Bar ─── */
/* Thin bar at top, grows during HTMX requests (DHH style) */

@keyframes progress-grow {
  0%   { width: 0%; }
  50%  { width: 60%; }
  100% { width: 90%; }
}

#htmx-progress.htmx-request {
  animation: progress-grow 2s ease-out forwards;
}


/* ─── Toast Animations ─── */
/* Toasts slide in from the top, then fade out on dismiss. */

@keyframes toast-enter {
  from { opacity: 0; transform: translateY(-1rem); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes toast-exit {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-0.5rem); }
}

.toast-enter { animation: toast-enter 0.3s ease-out; }
.toast-exit  { animation: toast-exit 0.3s ease-out forwards; }


/* ─── Page Transitions ─── */
/* Subtle fade-up for page content on navigation */

@keyframes page-enter {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.page-enter {
  animation: page-enter 0.25s ease-out;
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.fade-up {
  animation: fade-up 0.3s ease-out both;
}


/* ─── Accessibility ─── */
/* Respect reduced motion preference */

@media (prefers-reduced-motion: reduce) {
  .page-enter, .fade-up, .toast-enter {
    animation: none !important;
    opacity: 1 !important;
  }
  #htmx-progress.htmx-request {
    animation: none !important;
    width: 90% !important;
  }
}