
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

@import "tailwindcss";
@import "tw-animate-css";

@custom-variant dark (&:is(.dark *));

/* ── Tailwind v4: CSS var bridge ─────────────────────────────────────────── */
@theme inline {
  --color-background:             var(--background);
  --color-foreground:             var(--foreground);
  --color-card:                   var(--card);
  --color-card-foreground:        var(--card-foreground);
  --color-popover:                var(--popover);
  --color-popover-foreground:     var(--popover-foreground);
  --color-primary:                var(--primary);
  --color-primary-foreground:     var(--primary-foreground);
  --color-secondary:              var(--secondary);
  --color-secondary-foreground:   var(--secondary-foreground);
  --color-muted:                  var(--muted);
  --color-muted-foreground:       var(--muted-foreground);
  --color-accent:                 var(--accent);
  --color-accent-foreground:      var(--accent-foreground);
  --color-destructive:            var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border:                 var(--border);
  --color-input:                  var(--input);
  --color-ring:                   var(--ring);
  --color-sidebar:                var(--sidebar);
  --color-sidebar-foreground:     var(--sidebar-foreground);
  --color-sidebar-primary:        var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent:         var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border:         var(--sidebar-border);
  --color-sidebar-ring:           var(--sidebar-ring);

  --font-sans: var(--font-sans);
  --font-mono: var(--font-mono);

  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);

  --shadow-2xs: var(--shadow-2xs);
  --shadow-xs:  var(--shadow-xs);
  --shadow-sm:  var(--shadow-sm);
  --shadow:     var(--shadow);
  --shadow-md:  var(--shadow-md);
  --shadow-lg:  var(--shadow-lg);
  --shadow-xl:  var(--shadow-xl);
  --shadow-2xl: var(--shadow-2xl);

  --animate-accordion-down: accordion-down 0.2s ease-out;
  --animate-accordion-up:   accordion-up   0.2s ease-out;
  --font-heading:             var(--font-sans);
}

/* ══════════════════════════════════════════════════════════════════════════
   LIGHT THEME — Clean, modern, Vercel-inspired with Canifa amber accent
   ══════════════════════════════════════════════════════════════════════════ */
:root {
  color-scheme: light;
  
  /* ── Memos Note Platform Colors (oklch) ── */
  --background: oklch(0.9818 0.0054 95.0986);
  --foreground: oklch(0.2438 0.0269 95.7226);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.1908 0.002 106.5859);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.2671 0.0196 98.939);
  
  --primary: oklch(0.45 0.08 250);
  --primary-foreground: oklch(0.9818 0.0054 95.0986);
  --secondary: oklch(0.9245 0.0138 92.9892);
  --secondary-foreground: oklch(0.4334 0.0177 98.6048);
  --muted: oklch(0.9341 0.0153 90.239);
  --muted-foreground: oklch(0.5559 0.0075 97.4233);
  --accent: oklch(0.9245 0.0138 92.9892);
  --accent-foreground: oklch(0.2671 0.0196 98.939);
  
  --destructive: oklch(0.35 0.02 250);
  --destructive-foreground: oklch(0.95 0.005 250);
  
  --border: oklch(0.8847 0.0069 97.3627);
  --input: oklch(0.7621 0.0156 98.3528);
  --ring: oklch(0.45 0.08 250);
  
  /* ── Sidebar ── */
  --sidebar: oklch(0.9663 0.008 98.8792);
  --sidebar-foreground: oklch(0.359 0.0051 106.6524);
  --sidebar-primary: oklch(0.45 0.08 250);
  --sidebar-primary-foreground: oklch(0.9818 0.0054 95.0986);
  --sidebar-accent: oklch(0.9245 0.0138 92.9892);
  --sidebar-accent-foreground: oklch(0.325 0 0);
  --sidebar-border: oklch(0.9401 0 0);
  --sidebar-ring: oklch(0.7731 0 0);

  /* ── Radius & Spacing ── */
  --radius: 0.5rem;
  --spacing: 0.25rem;

  /* ── Memos Distinct Flat Shadows ── */
  --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
  --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
  --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
  --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 4px 6px -1px hsl(0 0% 0% / 0.1);
  --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 8px 10px -1px hsl(0 0% 0% / 0.1);
  --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);

  /* ── Fonts ── */
  --font-sans:
    ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* ══════════════════════════════════════════════════════════════════════════
   DARK THEME — activated via .dark class on <html> by VueUse useDark()
   ══════════════════════════════════════════════════════════════════════════ */
.dark {
  color-scheme: dark;
  --background:         oklch(0.095 0.010 260);
  --foreground:         oklch(0.930 0.006 248);
  --card:               oklch(0.130 0.010 260);
  --card-foreground:    oklch(0.930 0.006 248);
  --popover:            oklch(0.130 0.010 260);
  --popover-foreground: oklch(0.930 0.006 248);
  --primary:            oklch(0.720 0.160 55);
  --primary-foreground: oklch(0.100 0.008 260);
  --secondary:          oklch(0.190 0.012 260);
  --secondary-foreground: oklch(0.930 0.006 248);
  --muted:              oklch(0.190 0.010 260);
  --muted-foreground:   oklch(0.580 0.012 258);
  --accent:             oklch(0.200 0.015 60);
  --accent-foreground:  oklch(0.930 0.006 248);
  --destructive:        oklch(0.520 0.220 27);
  --destructive-foreground: oklch(0.930 0.006 248);
  --border:             oklch(0.220 0.012 260);
  --input:              oklch(0.220 0.012 260);
  --ring:               oklch(0.720 0.160 55);
  --sidebar:            oklch(0.110 0.010 260);
  --sidebar-foreground: oklch(0.900 0.006 248);
  --sidebar-primary:    oklch(0.720 0.160 55);
  --sidebar-primary-foreground: oklch(0.100 0.008 260);
  --sidebar-accent:     oklch(0.180 0.012 260);
  --sidebar-accent-foreground: oklch(0.900 0.006 248);
  --sidebar-border:     oklch(0.210 0.012 260);
  --sidebar-ring:       oklch(0.720 0.160 55);
}

/* ══════════════════════════════════════════════════════════════════════════
   BASE LAYER
   ══════════════════════════════════════════════════════════════════════════ */
@layer base {
  *, *::before, *::after {
    box-sizing: border-box;
    @apply border-border;
  }

  html {
    scroll-behavior: smooth;
  }

  html, body, #app {
    margin: 0;
    padding: 0;
    height: 100%;
  }

  body {
    @apply bg-background text-foreground;
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  }

  a {
    text-decoration: none;
    color: inherit;
  }

  /* ── Scrollbar: thinner, matches brand ── */
  ::-webkit-scrollbar { width: 4px; height: 4px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb {
    background: oklch(0.850 0.006 248);
    border-radius: 99px;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: oklch(0.680 0.165 55);
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   COMPONENT UTILITIES — used across all pages
   ══════════════════════════════════════════════════════════════════════════ */
@layer components {

  /* ── Page wrapper standard ── */
  .page-container {
    @apply p-6 lg:p-8 max-w-[1300px] space-y-6;
  }

  /* ── Section divider with label ── */
  .section-label {
    @apply text-[10px] font-bold uppercase tracking-[0.12em] text-muted-foreground;
  }

  /* ── Premium stat number ── */
  .stat-number {
    @apply text-3xl font-black tabular-nums leading-none tracking-tight text-foreground;
  }

  /* ── Status dot (live pulse) ── */
  .status-dot-live::before {
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 3px rgba(34,197,94,0.2);
    animation: pulse-ring 2s ease-in-out infinite;
    margin-right: 6px;
  }

  /* ── Card hover lift ── */
  .card-hover {
    @apply transition-all duration-200 hover:shadow-md hover:-translate-y-0.5 hover:border-primary/20;
  }

  /* ── Glass card ── */
  .card-glass {
    background: rgba(255,255,255,0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.8);
    box-shadow: 0 4px 24px -4px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.9);
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   KEYFRAMES
   ══════════════════════════════════════════════════════════════════════════ */
@keyframes accordion-down {
  from { height: 0; opacity: 0; }
  to   { height: var(--reka-accordion-content-height); opacity: 1; }
}
@keyframes accordion-up {
  from { height: var(--reka-accordion-content-height); opacity: 1; }
  to   { height: 0; opacity: 0; }
}
@keyframes pulse-ring {
  0%, 100% { box-shadow: 0 0 0 3px rgba(34,197,94,0.2); }
  50%       { box-shadow: 0 0 0 5px rgba(34,197,94,0.1); }
}
@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

/* ── Tailwind utility overrides ── */
.animate-fade-in-up  { animation: fade-in-up  0.4s ease-out both; }
.animate-fade-in     { animation: fade-in     0.3s ease-out both; }

/* ── Table improvements ── */
table { @apply w-full; }
thead tr { @apply border-b border-border bg-muted/40; }
thead th {
  @apply px-4 py-3 text-left text-[11px] font-bold uppercase tracking-wider text-muted-foreground;
}
tbody tr {
  @apply border-b border-border/50 transition-colors hover:bg-muted/30;
}
tbody td { @apply px-4 py-3 text-sm text-foreground; }

/* ── Input focus ring ── */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--ring);
}

/* ── Badge size fix ── */
.badge-xs { @apply text-[9px] px-1.5 py-0.5 leading-none font-bold uppercase tracking-wider rounded-full; }

/* ── Memos Style: Form Transitions globally ── */
button, a, .section-menu-item {
  transition: all 0.15s ease;
}
input, textarea, select, .search-bar input {
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* ── Fade transition for toasts / alerts ── */
.fade-enter-active, .fade-leave-active { transition: opacity 0.25s, transform 0.25s; }
.fade-enter-from { opacity: 0; transform: translateY(6px); }
.fade-leave-to   { opacity: 0; transform: translateY(-4px); }

@layer base {
  * {
    @apply border-border outline-none ring-0;
  }
  body {
    @apply bg-background text-foreground;
  }

  /* ── Overriding scrollbar thumb properly for Hex variables ── */
  ::-webkit-scrollbar-thumb {
    background: var(--input); 
    border-radius: 99px;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: var(--muted-foreground);
  }
}

