@layer theme, base, components, utilities;
@import "tailwindcss/theme.css" layer(theme);
@import "./tailwind-preflight.css" layer(base);
@import "tailwindcss/utilities.css" layer(utilities);

@import "tw-animate-css";

@import "./highlight-js-github-dark.min.css";
@import "./markdown-editing.css";
@import "./markdown-content.css";

@import "@ionic/react/css/core.css";
@import "@ionic/react/css/padding.css";
@import "@ionic/react/css/palettes/dark.system.css";
@import "./ionic-modifications.css";

@import "./scrollbars.css";

@font-face {
  font-family: Jersey10;
  font-display: swap;
  src: url(/fonts/Jersey10-Regular.ttf);
}

@custom-variant dark (
  @media (prefers-color-scheme: dark),
  &:where(.dark, .dark *)
);

:root {
  /* Increase small text size slightly */
  --text-sm: 0.875rem;

  --brand: #d40091;
  --brand-secondary: #4123d0;

  /* Shad cn theme */
  --radius: 0.625rem;
  --shad-background: oklch(1 0 0);
  --shad-foreground: oklch(0.141 0.005 285.823);
  --shad-card: oklch(1 0 0);
  --shad-card-foreground: oklch(0.141 0.005 285.823);
  --shad-popover: oklch(1 0 0);
  --shad-popover-foreground: oklch(0.141 0.005 285.823);
  --shad-primary: oklch(0.21 0.006 285.885);
  --shad-primary-foreground: oklch(0.985 0 0);
  --shad-secondary: oklch(0.967 0.001 286.375);
  --shad-secondary-foreground: oklch(0.21 0.006 285.885);
  --shad-muted: oklch(0.967 0.001 286.375);
  --shad-muted-foreground: oklch(0.552 0.016 285.938);
  --shad-accent: oklch(0.967 0.001 286.375);
  --shad-accent-foreground: oklch(0.21 0.006 285.885);
  --shad-destructive: oklch(0.577 0.245 27.325);
  --shad-border: oklch(0.92 0.004 286.32);
  --shad-input: oklch(0.92 0.004 286.32);
  --shad-ring: oklch(0.705 0.015 286.067);
  --shad-chart-1: oklch(0.646 0.222 41.116);
  --shad-chart-2: oklch(0.6 0.118 184.704);
  --shad-chart-3: oklch(0.398 0.07 227.392);
  --shad-chart-4: oklch(0.828 0.189 84.429);
  --shad-chart-5: oklch(0.769 0.188 70.08);
  --shad-sidebar: oklch(0.985 0 0);
  --shad-sidebar-foreground: oklch(0.141 0.005 285.823);
  --shad-sidebar-primary: oklch(0.21 0.006 285.885);
  --shad-sidebar-primary-foreground: oklch(0.985 0 0);
  --shad-sidebar-accent: oklch(0.967 0.001 286.375);
  --shad-sidebar-accent-foreground: oklch(0.21 0.006 285.885);
  --shad-sidebar-border: oklch(0.92 0.004 286.32);
  --shad-sidebar-ring: oklch(0.705 0.015 286.067);
}

@media (prefers-color-scheme: dark) {
  :root:root {
    --brand: #ff1fbb;
    --brand-secondary: #876cff;

    /* Shad cn dark theme */
    --shad-background: oklch(0 0 0);
    --shad-foreground: oklch(0.985 0 0);
    --shad-card: oklch(0.21 0.006 285.885);
    --shad-card-foreground: oklch(0.985 0 0);
    --shad-popover: oklch(0.21 0.006 285.885);
    --shad-popover-foreground: oklch(0.985 0 0);
    --shad-primary: oklch(0.92 0.004 286.32);
    --shad-primary-foreground: oklch(0.21 0.006 285.885);
    --shad-secondary: oklch(0.274 0.006 286.033);
    --shad-secondary-foreground: oklch(0.985 0 0);
    --shad-muted: oklch(0.274 0.006 286.033);
    --shad-muted-foreground: oklch(0.705 0.015 286.067);
    --shad-accent: oklch(0.274 0.006 286.033);
    --shad-accent-foreground: oklch(0.985 0 0);
    --shad-destructive: oklch(0.704 0.191 22.216);
    --shad-border: oklch(1 0 0 / 20%);
    --shad-input: oklch(1 0 0 / 15%);
    --shad-ring: oklch(0.552 0.016 285.938);
    --shad-chart-1: oklch(0.488 0.243 264.376);
    --shad-chart-2: oklch(0.696 0.17 162.48);
    --shad-chart-3: oklch(0.769 0.188 70.08);
    --shad-chart-4: oklch(0.627 0.265 303.9);
    --shad-chart-5: oklch(0.645 0.246 16.439);
    --shad-sidebar: oklch(0.21 0.006 285.885);
    --shad-sidebar-foreground: oklch(0.985 0 0);
    --shad-sidebar-primary: oklch(0.488 0.243 264.376);
    --shad-sidebar-primary-foreground: oklch(0.985 0 0);
    --shad-sidebar-accent: oklch(0.274 0.006 286.033);
    --shad-sidebar-accent-foreground: oklch(0.985 0 0);
    --shad-sidebar-border: oklch(1 0 0 / 10%);
    --shad-sidebar-ring: oklch(0.552 0.016 285.938);
  }
}

.dark {
  --brand: #ff1fbb;
  --brand-secondary: #876cff;

  /* Shad cn dark theme */
  --shad-background: oklch(0 0 0);
  --shad-foreground: oklch(0.985 0 0);
  --shad-card: oklch(0.21 0.006 285.885);
  --shad-card-foreground: oklch(0.985 0 0);
  --shad-popover: oklch(0.21 0.006 285.885);
  --shad-popover-foreground: oklch(0.985 0 0);
  --shad-primary: oklch(0.92 0.004 286.32);
  --shad-primary-foreground: oklch(0.21 0.006 285.885);
  --shad-secondary: oklch(0.274 0.006 286.033);
  --shad-secondary-foreground: oklch(0.985 0 0);
  --shad-muted: oklch(0.274 0.006 286.033);
  --shad-muted-foreground: oklch(0.705 0.015 286.067);
  --shad-accent: oklch(0.274 0.006 286.033);
  --shad-accent-foreground: oklch(0.985 0 0);
  --shad-destructive: oklch(0.704 0.191 22.216);
  --shad-border: oklch(1 0 0 / 20%);
  --shad-input: oklch(1 0 0 / 15%);
  --shad-ring: oklch(0.552 0.016 285.938);
  --shad-chart-1: oklch(0.488 0.243 264.376);
  --shad-chart-2: oklch(0.696 0.17 162.48);
  --shad-chart-3: oklch(0.769 0.188 70.08);
  --shad-chart-4: oklch(0.627 0.265 303.9);
  --shad-chart-5: oklch(0.645 0.246 16.439);
  --shad-sidebar: oklch(0.21 0.006 285.885);
  --shad-sidebar-foreground: oklch(0.985 0 0);
  --shad-sidebar-primary: oklch(0.488 0.243 264.376);
  --shad-sidebar-primary-foreground: oklch(0.985 0 0);
  --shad-sidebar-accent: oklch(0.274 0.006 286.033);
  --shad-sidebar-accent-foreground: oklch(0.985 0 0);
  --shad-sidebar-border: oklch(1 0 0 / 10%);
  --shad-sidebar-ring: oklch(0.552 0.016 285.938);

  @apply text-foreground;
}

@theme inline {
  --font-jersey: "Jersey10";

  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --color-brand: var(--brand);
  --color-brand-secondary: var(--brand-secondary);
  --color-brand-foreground: white;
  --color-background: var(--shad-background);
  --color-foreground: var(--shad-foreground);
  --color-card: var(--shad-card);
  --color-card-foreground: var(--shad-card-foreground);
  --color-popover: var(--shad-popover);
  --color-popover-foreground: var(--shad-popover-foreground);
  --color-primary: var(--shad-primary);
  --color-primary-foreground: var(--shad-primary-foreground);
  --color-secondary: var(--shad-secondary);
  --color-secondary-foreground: var(--shad-secondary-foreground);
  --color-muted: var(--shad-muted);
  --color-muted-foreground: var(--shad-muted-foreground);
  --color-accent: var(--shad-accent);
  --color-accent-foreground: var(--shad-accent-foreground);
  --color-destructive: var(--shad-destructive);
  --color-border: var(--shad-border);
  --color-input: var(--shad-input);
  --color-ring: var(--shad-ring);
  --color-chart-1: var(--shad-chart-1);
  --color-chart-2: var(--shad-chart-2);
  --color-chart-3: var(--shad-chart-3);
  --color-chart-4: var(--shad-chart-4);
  --color-chart-5: var(--shad-chart-5);
  --color-sidebar: var(--shad-sidebar);
  --color-sidebar-foreground: var(--shad-sidebar-foreground);
  --color-sidebar-primary: var(--shad-sidebar-primary);
  --color-sidebar-primary-foreground: var(--shad-sidebar-primary-foreground);
  --color-sidebar-accent: var(--shad-sidebar-accent);
  --color-sidebar-accent-foreground: var(--shad-sidebar-accent-foreground);
  --color-sidebar-border: var(--shad-sidebar-border);
  --color-sidebar-ring: var(--shad-sidebar-ring);

  --height-safe-area-bottom: var(--ion-safe-area-bottom);
  --height-safe-area-top: var(--ion-safe-area-top);
  --height-safe-area-right: var(--ion-safe-area-right);
  --height-safe-area-left: var(--ion-safe-area-left);
}

button,
details summary {
  cursor: pointer;
}

*::selection {
  color: white !important;
  background-color: var(--color-brand-secondary) !important;
}

[data-tauri-drag-region] {
  user-select: none;
}

body {
  background-color: var(--color-background);
  /* 
   * Prevent overscroll bouncing 
   * This makes the header, sidebar, and tabbar 
   * stay put instead of bouncing.
   **/
  overflow: hidden;
  /* 
   * Prevent body from collapsing height when radix
   * dropdown menu opens
   **/
  min-height: 100svh;

  /*-webkit-text-size-adjust: 150%;*/
}

/**
 * Prevent default iOS long press image and link action.
 */
a,
img {
  /* Disable the iOS touch-callout (context menu) */
  -webkit-touch-callout: none;
  /* Optional: prevent image dragging */
  -webkit-user-drag: none;
}

/* Hide native x icon in search input */
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
}
