@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap');

@import "tailwindcss";

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

@theme {
  --color-surface: #ffffff;
  --color-surface-dim: #f1f5f9;
  --color-surface-bright: #ffffff;
  --color-surface-container-lowest: #ffffff;
  --color-surface-container-low: #f8fafc;
  --color-surface-container: #f1f5f9;
  --color-surface-container-high: #e2e8f0;
  --color-surface-container-highest: #cbd5e1;
  --color-on-surface: #0f172a;
  --color-on-surface-variant: #475569;
  --color-inverse-surface: #0f172a;
  --color-inverse-on-surface: #ffffff;
  --color-outline: #94a3b8;
  --color-outline-variant: #cbd5e1;
  --card-border-color: #cbd5e1;
  --sidebar-border-color: #cbd5e1;
  --header-border-color: #cbd5e1;
  --color-surface-tint: #15803c;
  --color-primary: #15803c;
  --color-on-primary: #ffffff;
  --color-success: #15803c;
  --color-on-success: #ffffff;
  --color-primary-container: #dcfce7;
  --color-on-primary-container: #14532d;
  --color-inverse-primary: #79db8c;
  --color-secondary: #475569;
  --color-on-secondary: #ffffff;
  --color-secondary-container: #f1f5f9;
  --color-on-secondary-container: #1e293b;
  --color-tertiary: #64748b;
  --color-on-tertiary: #ffffff;
  --color-tertiary-container: #f1f5f9;
  --color-on-tertiary-container: #0f172a;
  --color-error: #dc2626;
  --color-on-error: #ffffff;
  --color-error-container: #fee2e2;
  --color-on-error-container: #991b1b;
  --color-primary-fixed: #dcfce7;
  --color-primary-fixed-dim: #bbf7d0;
  --color-on-primary-fixed: #14532d;
  --color-on-primary-fixed-variant: #15803c;
  --color-secondary-fixed: #e2e8f0;
  --color-secondary-fixed-dim: #cbd5e1;
  --color-on-secondary-fixed: #0f172a;
  --color-on-secondary-fixed-variant: #334155;
  --color-tertiary-fixed: #e2e8f0;
  --color-tertiary-fixed-dim: #cbd5e1;
  --color-on-tertiary-fixed: #0f172a;
  --color-on-tertiary-fixed-variant: #334155;
  --color-background: #f8fafc;
  --color-on-background: #0f172a;
  --color-surface-variant: #f1f5f9;

  --color-theme-card-header: #f8fafc;
  --color-theme-table-header: #f8fafc;
  --color-theme-table-header-text: #0f172a;
  --color-theme-table-border: #cbd5e1;

  --radius-sm: 0.25rem;
  --radius-DEFAULT: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-full: 9999px;

  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-xxl: 48px;
  --spacing-gutter: 24px;
  --spacing-container-padding: 24px;

  --font-headline-xl: "Hanken Grotesk", sans-serif;
  --font-headline-lg: "Hanken Grotesk", sans-serif;
  --font-headline-md: "Hanken Grotesk", sans-serif;
  --font-title-lg: "Hanken Grotesk", sans-serif;
  --font-body-lg: "Hanken Grotesk", sans-serif;
  --font-body-md: "Hanken Grotesk", sans-serif;
  --font-label-md: "Hanken Grotesk", sans-serif;
  --font-label-sm: "Hanken Grotesk", sans-serif;
  --font-headline-lg-mobile: "Hanken Grotesk", sans-serif;
  --font-data-mono: "JetBrains Mono", monospace;
}

@layer base {
  body {
    font-family: var(--font-body-md);
  }

  .dark {
    --color-surface: #031427;
    --color-surface-dim: #031427;
    --color-surface-bright: #2a3a4f;
    --color-surface-container-lowest: #000f21;
    --color-surface-container-low: #0b1c30;
    --color-surface-container: #102034;
    --color-surface-container-high: #1b2b3f;
    --color-surface-container-highest: #26364a;
    --color-on-surface: #d3e4fe;
    --color-on-surface-variant: #becabb;
    --color-inverse-surface: #d3e4fe;
    --color-inverse-on-surface: #213145;
    --color-outline: #889487;
    --color-outline-variant: #3f4a3f;
    --card-border-color: #3f4a3f;
    --sidebar-border-color: #3f4a3f;
    --header-border-color: #3f4a3f;
    --color-surface-tint: #15803c;
    --color-primary: #15803c;
    --color-on-primary: #ffffff;
    --color-success: #79db8c;
    --color-on-success: #0f172a;
    --color-primary-container: #15803c;
    --color-on-primary-container: #d3ffd4;
    --color-inverse-primary: #006d2f;
    --color-secondary: #bec6e0;
    --color-on-secondary: #283044;
    --color-secondary-container: #3f465c;
    --color-on-secondary-container: #adb4ce;
    --color-tertiary: #c4c7c9;
    --color-on-tertiary: #2d3133;
    --color-tertiary-container: #6d7072;
    --color-on-tertiary-container: #f2f4f6;
    --color-error: #ffb4ab;
    --color-on-error: #690005;
    --color-error-container: #93000a;
    --color-on-error-container: #ffdad6;
    --color-primary-fixed: #95f8a5;
    --color-primary-fixed-dim: #79db8c;
    --color-on-primary-fixed: #00210a;
    --color-on-primary-fixed-variant: #005322;
    --color-secondary-fixed: #dae2fd;
    --color-secondary-fixed-dim: #bec6e0;
    --color-on-secondary-fixed: #131b2e;
    --color-on-secondary-fixed-variant: #3f465c;
    --color-tertiary-fixed: #e0e3e5;
    --color-tertiary-fixed-dim: #c4c7c9;
    --color-on-tertiary-fixed: #191c1e;
    --color-on-tertiary-fixed-variant: #444749;
    --color-background: #031427;
    --color-on-background: #d3e4fe;
    --color-surface-variant: #26364a;

    --color-theme-card-header: #102034;
    --color-theme-table-header: #102034;
    --color-theme-table-header-text: #d3e4fe;
    --color-theme-table-border: #3f4a3f;
  }

  /* Global Cursor Rules for Clickable Elements */
  a[href], 
  button, 
  [role="button"], 
  input[type="submit"], 
  input[type="reset"], 
  input[type="button"],
  select,
  label[for],
  summary,
  .clickable {
    cursor: pointer;
  }

  button:disabled, 
  input:disabled, 
  select:disabled, 
  textarea:disabled,
  a[disabled],
  [disabled] {
    cursor: not-allowed;
  }
}

@layer utilities {
  .material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    vertical-align: middle;
  }

  .card-shadow {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  }

  .card-hover:hover {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    transform: translateY(-1px);
  }

  .custom-scrollbar::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  .custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
  }

  .custom-scrollbar::-webkit-scrollbar-thumb {
    background: var(--color-outline-variant);
    border-radius: 10px;
  }
}