@import "tailwindcss";
@import "shadcn/tailwind.css";

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

/* ============================================================
   OSU ALATA KAKALOI — Design Tokens
   ============================================================ */
:root {
  --cream: #F5EDE0;
  --cream-deep: #ECE0CC;
  --paper: #FAF6EE;
  --ochre: #C8842B;
  --ochre-deep: #9E6418;
  --terracotta: #9A4A2D;
  --brass: #A88842;
  --indigo: #1B2A4E;
  --indigo-deep: #0E1A35;
  --ink: #1A1612;
  --ink-soft: #3D332A;
  --rule-color: #2C211A;
  --design-muted: #6B5B4D;
  --line: rgba(28, 22, 17, 0.18);
  --line-strong: rgba(28, 22, 17, 0.42);

  --serif-display: "DM Serif Display", "Cormorant Garamond", Georgia, serif;
  --serif-body: "Lora", Georgia, "Times New Roman", serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --sans: "Inter Tight", ui-sans-serif, system-ui, sans-serif;

  --gutter: clamp(20px, 4vw, 56px);
  --maxw: 1240px;
  --maxw-narrow: 880px;

  /* Shadcn semantic token mapping */
  --background: #F5EDE0;
  --foreground: #1A1612;
  --card: #FAF6EE;
  --card-foreground: #1A1612;
  --popover: #FAF6EE;
  --popover-foreground: #1A1612;
  --primary: #1A1612;
  --primary-foreground: #F5EDE0;
  --secondary: #C8842B;
  --secondary-foreground: #1A1612;
  --muted: #ECE0CC;
  --muted-foreground: #6B5B4D;
  --accent: #9A4A2D;
  --accent-foreground: #F5EDE0;
  --destructive: #9A4A2D;
  --destructive-foreground: #F5EDE0;
  --border: rgba(28, 22, 17, 0.42);
  --input: rgba(28, 22, 17, 0.42);
  --ring: #C8842B;
  --radius: 0rem;
  --sidebar: #FAF6EE;
  --sidebar-foreground: #1A1612;
  --sidebar-primary: #C8842B;
  --sidebar-primary-foreground: #1A1612;
  --sidebar-accent: #ECE0CC;
  --sidebar-accent-foreground: #1A1612;
  --sidebar-border: rgba(28, 22, 17, 0.42);
  --sidebar-ring: #C8842B;
  --chart-1: #C8842B;
  --chart-2: #9A4A2D;
  --chart-3: #1B2A4E;
  --chart-4: #A88842;
  --chart-5: #ECE0CC;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--sans);
  --font-mono: var(--mono);
  --font-heading: var(--serif-display);
  --font-serif: var(--serif-body);
  --animate-marquee: marquee 32s linear infinite;
  /* Design palette exposed as Tailwind utilities */
  --color-cream: var(--cream);
  --color-cream-deep: var(--cream-deep);
  --color-paper: var(--paper);
  --color-ochre: var(--ochre);
  --color-ochre-deep: var(--ochre-deep);
  --color-terracotta: var(--terracotta);
  --color-indigo-brand: var(--indigo);
  --color-ink: var(--ink);
  --color-ink-soft: var(--ink-soft);
  --color-rule: var(--rule-color);
  --color-design-muted: var(--design-muted);
  /* Shadcn semantic tokens */
  --color-sidebar-ring: var(--sidebar-ring);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar: var(--sidebar);
  --color-chart-5: var(--chart-5);
  --color-chart-4: var(--chart-4);
  --color-chart-3: var(--chart-3);
  --color-chart-2: var(--chart-2);
  --color-chart-1: var(--chart-1);
  --color-ring: var(--ring);
  --color-input: var(--input);
  --color-border: var(--border);
  --color-destructive: var(--destructive);
  --color-accent-foreground: var(--accent-foreground);
  --color-accent: var(--accent);
  --color-muted-foreground: var(--muted-foreground);
  --color-muted: var(--muted);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-secondary: var(--secondary);
  --color-primary-foreground: var(--primary-foreground);
  --color-primary: var(--primary);
  --color-popover-foreground: var(--popover-foreground);
  --color-popover: var(--popover);
  --color-card-foreground: var(--card-foreground);
  --color-card: var(--card);
  --radius-sm: 0;
  --radius-md: 0;
  --radius-lg: 0;
  --radius-xl: 0;
  --radius-2xl: 0;
  --radius-3xl: 0;
  --radius-4xl: 0;
}

/* ============================================================
   BASE
   ============================================================ */
@layer base {
  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    @apply bg-cream text-ink;
    font-family: var(--serif-body);
    font-size: 17px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
  img { max-width: 100%; display: block; }
  a {
    color: var(--indigo);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    transition: color 160ms ease, opacity 160ms ease;
  }
  a:hover { color: var(--terracotta); }
  ::selection { background: var(--ochre); color: var(--paper); }
  h1, h2, h3, h4 {
    font-family: var(--serif-display);
    font-weight: 400;
    color: var(--ink);
    line-height: 1.05;
    letter-spacing: -0.01em;
    margin: 0 0 0.4em;
  }
  h1 { font-size: clamp(48px, 7vw, 104px); }
  h2 { font-size: clamp(32px, 4.4vw, 60px); }
  h3 { font-size: clamp(22px, 2.2vw, 32px); }
  h4 { font-size: clamp(18px, 1.6vw, 22px); }
  p { margin: 0 0 1.1em; max-width: 64ch; }
}

/* ============================================================
   LAYOUT
   ============================================================ */
.wrap { max-width: var(--maxw); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.wrap--narrow { max-width: var(--maxw-narrow); }

/* ============================================================
   TYPOGRAPHY HELPERS
   ============================================================ */
.lede { font-size: clamp(18px, 1.5vw, 22px); line-height: 1.55; color: var(--ink-soft); font-style: italic; max-width: 56ch; }
.eyebrow { font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.18em; font-size: 11px; color: var(--terracotta); font-weight: 500; }
.smallcaps { font-variant: small-caps; letter-spacing: 0.08em; }
.dropcap::first-letter { font-family: var(--serif-display); font-size: 5.4em; float: left; line-height: 0.85; padding: 0.05em 0.12em 0 0; color: var(--terracotta); }
.foot-ref { font-family: var(--mono); font-size: 0.65em; vertical-align: super; color: var(--terracotta); margin-left: 2px; border: none; cursor: help; }

/* ============================================================
   RULES
   ============================================================ */
.rule { border: 0; border-top: 1px solid var(--line-strong); margin: 0; }
.rule--double { height: 6px; border-top: 1px solid var(--rule-color); border-bottom: 1px solid var(--rule-color); background: transparent; }
.rule--ornament { display: flex; align-items: center; gap: 16px; color: var(--ochre-deep); margin: 56px 0; }
.rule--ornament::before, .rule--ornament::after { content: ""; flex: 1; border-top: 1px solid var(--line-strong); }
.rule--ornament .ornament { font-family: var(--serif-display); letter-spacing: 0.4em; font-size: 14px; }

/* ============================================================
   SECTION HEADS
   ============================================================ */
section { padding: 72px 0; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-bottom: 40px; padding-bottom: 16px; }
.section-head h2 { margin: 0; }
.section-head .num { font-family: var(--mono); font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--terracotta); }

/* ============================================================
   CARDS / TAGS / FIGURES / CITATIONS
   ============================================================ */
.card { background: var(--paper); border: 1px solid var(--line-strong); padding: 28px; transition: transform 200ms ease, box-shadow 200ms ease; }
.card:hover { transform: translateY(-2px); box-shadow: 0 12px 28px -16px rgba(28, 22, 17, 0.4); }
.tag { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; padding: 4px 10px; border: 1px solid var(--line-strong); color: var(--ink-soft); background: transparent; }
.tag--ochre { background: var(--ochre); border-color: var(--ochre); color: var(--ink); }
.tag--indigo { background: var(--indigo); border-color: var(--indigo); color: var(--cream); }
.tag--terracotta { background: var(--terracotta); border-color: var(--terracotta); color: var(--cream); }
.cite { font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em; vertical-align: super; color: var(--terracotta); background: rgba(200, 132, 43, 0.12); padding: 1px 5px; border-radius: 2px; margin-left: 2px; text-transform: uppercase; }
.figure { margin: 0; border: 1px solid var(--line-strong); background: var(--cream-deep); overflow: hidden; }
.figure__img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; filter: saturate(0.85) contrast(1.02); }
.figure__cap { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--design-muted); padding: 12px 14px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 12px; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }

@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ============================================================
   CHIP (shared: events & gallery filter bars)
   ============================================================ */
.chip { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; padding: 8px 14px; border: 1px solid var(--line-strong); background: transparent; color: var(--ink); cursor: pointer; transition: all 160ms ease; }
.chip:hover, .chip.is-active { background: var(--ink); color: var(--cream); border-color: var(--ink); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 860px) {
  .two-col { grid-template-columns: 1fr; gap: 32px; }
}