/* Entry point for PostCSS build - imports all design system files */

/* Import design tokens in order */

/* ================================
   FONT FACE DECLARATIONS
   Single source of truth for all fonts
   Only includes fonts actually used in the codebase
   ================================ */

/* Editorial Old Font Family - Primary serif font
   Licensed weights: Regular (400) and Italic (400) only */

@font-face {
  font-family: 'Editorial Old';
  src: url("/assets/PPEditorialOld-Regular-c30b0927.otf") format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Editorial Old';
  src: url("/assets/PPEditorialOld-Italic-a0b1b148.otf") format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* Handwriting Fonts - Used for personal notes, markup annotations */

@font-face {
  font-family: 'Monk Handwriting';
  src: url("/assets/monk-handwriting-36a9cba9.ttf") format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Handwritten2';
  src: url("/assets/handwritten-2-8e9efa73.ttf") format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ================================
   COLOR SYSTEM
   Single source of truth for all colors
   ================================ */

:root {
  /* ===== Primitive Colors ===== */

  /* Grayscale */
  --color-black: #000000;
  --color-white: #ffffff;
  --color-gray-50: rgba(255, 255, 255, 0.05);
  --color-gray-100: rgba(255, 255, 255, 0.15);
  --color-gray-200: rgba(0, 0, 0, 0.02);
  --color-gray-300: rgba(0, 0, 0, 0.08);
  --color-gray-400: rgba(0, 0, 0, 0.15);
  --color-gray-500: #666666;
  --color-gray-600: #555555;
  --color-gray-700: #333333;
  --color-gray-800: #1a1a1a;
  --color-gray-900: #0a0a0a;
  --color-gray-muted: #aaaaaa;

  /* Brand Colors */
  --color-ronin-red: rgb(188, 0, 45);     /* Primary red for markups, accents */
  --color-accent-purple: #7B68B8;         /* Interactive purple */

  /* ===== Semantic Tokens (Dark Theme Default) ===== */

  /* Backgrounds */
  --color-bg-primary: var(--color-black);
  --color-bg-secondary: var(--color-white);
  --color-bg-tertiary: var(--color-gray-800);
  --color-bg-overlay: var(--color-gray-50);
  --color-bg-subtle: var(--color-gray-200);

  /* Text */
  --color-text-primary: var(--color-white);
  --color-text-secondary: var(--color-black);
  --color-text-muted: var(--color-gray-muted);
  --color-text-inverse: var(--color-black);

  /* Interactive */
  --color-accent: var(--color-accent-purple);
  --color-accent-hover: var(--color-accent-purple);

  /* Feedback */
  --color-error: var(--color-ronin-red);
  --color-markup: var(--color-ronin-red);

  /* Borders */
  --color-border: var(--color-white);
  --color-border-muted: rgba(255, 255, 255, 0.3);
  --color-border-subtle: rgba(0, 0, 0, 0.1);

  /* Buttons */
  --color-button-default: var(--color-white);
  --color-button-text: var(--color-black);
  --color-button-hover: var(--color-accent-purple);
  --color-button-hover-text: var(--color-white);
}

/* ===== Light Theme Override ===== */

.light-theme {
  /* Backgrounds */
  --color-bg-primary: var(--color-white);
  --color-bg-secondary: var(--color-black);
  --color-bg-tertiary: rgba(0, 0, 0, 0.03);

  /* Text */
  --color-text-primary: var(--color-black);
  --color-text-secondary: var(--color-white);
  --color-text-muted: var(--color-gray-600);
  --color-text-inverse: var(--color-white);

  /* Borders */
  --color-border: var(--color-black);
  --color-border-muted: rgba(0, 0, 0, 0.3);

  /* Buttons */
  --color-button-default: var(--color-black);
  --color-button-text: var(--color-white);
}

/* ================================
   TYPOGRAPHY SYSTEM
   Font families, type scale, line heights, letter spacing
   ================================ */

:root {
  /* ===== Font Families ===== */

  --font-editorial: 'Editorial Old', Georgia, serif;
  --font-handwriting-monk: 'Monk Handwriting', cursive;
  --font-handwriting: 'Handwritten2', cursive;
  --font-signifier: 'Signifier', Georgia, serif;
  --font-system: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* ===== Type Scale (fluid, mobile-first) ===== */

  /* Small text */
  --text-xs: clamp(12px, 1.5vw, 14px);
  --text-sm: clamp(14px, 1.8vw, 16px);

  /* Body text */
  --text-base: clamp(16px, 2vw, 18px);
  --text-md: clamp(16px, 2vw, 19px);

  /* Emphasized text */
  --text-lg: clamp(20px, 2.5vw, 24px);
  --text-xl: clamp(24px, 3vw, 28px);

  /* Headings */
  --text-2xl: clamp(26px, min(7vw, 6vh), 28px);
  --text-3xl: clamp(32px, 4vw, 42px);
  --text-4xl: clamp(42px, 6vw, 64px);

  /* Handwriting (typically larger) */
  --text-handwriting-sm: clamp(18px, 2.2vw, 22px);
  --text-handwriting-base: clamp(22px, 2.8vw, 28px);
  --text-handwriting-md: clamp(23px, 2.9vw, 27px);
  --text-handwriting-lg: clamp(26px, 3.2vw, 36px);

  /* ===== Line Heights ===== */

  --leading-none: 1;
  --leading-tight: 1.15;
  --leading-snug: 1.4;
  --leading-normal: 1.6;
  --leading-relaxed: 1.8;
  --leading-loose: 2.1;

  /* ===== Letter Spacing ===== */

  --tracking-tighter: -0.02em;
  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.02em;
  --tracking-wider: 0.5px;
  --tracking-widest: 2px;

  /* ===== Font Weights ===== */

  --font-ultralight: 200;
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-black: 900;
}

/* ===== Mobile Overrides ===== */

@media (max-width: 768px) {
  :root {
    --text-2xl: clamp(22px, min(6vw, 5vh), 24px);
  }
}

/* ================================
   SPACING SYSTEM
   Spacing scale, layout dimensions
   ================================ */

:root {
  /* ===== Spacing Scale (fluid, mobile-first) ===== */

  /* Micro spacing */
  --space-xs: clamp(4px, 0.5vh, 6px);
  --space-sm: clamp(8px, 1vh, 12px);

  /* Standard spacing */
  --space-md: clamp(12px, 1.5vh, 16px);
  --space-lg: clamp(16px, 2vh, 20px);
  --space-xl: clamp(20px, 2.5vh, 24px);

  /* Section spacing */
  --space-2xl: clamp(24px, 3vh, 32px);
  --space-3xl: clamp(32px, 4vh, 40px);
  --space-4xl: clamp(40px, 5vh, 48px);
  --space-5xl: clamp(48px, 6vh, 64px);
  --space-6xl: clamp(64px, 8vh, 80px);
  --space-7xl: clamp(80px, 10vh, 120px);

  /* Paragraph & section gaps */
  --gap-para: clamp(24px, 2.8vh, 32px);
  --gap-section: clamp(32px, 4vh, 40px);
  --gap-large: clamp(60px, 8vh, 80px);

  /* ===== Layout Dimensions ===== */

  /* Gutters (horizontal padding) */
  --gutter: clamp(20px, 3vw, 40px);
  --gutter-lg: clamp(32px, 5vw, 120px);

  /* Content widths */
  --content-width: 650px;
  --content-width-narrative: 700px;
  --content-width-wide: 900px;
  --content-width-max: 950px;

  /* Component sizes */
  --button-padding-x: clamp(24px, 2.5vw, 32px);
  --button-padding-y: clamp(16px, 2vh, 20px);

  --input-padding-x: clamp(10px, 1.2vh, 14px);
  --input-padding-y: clamp(10px, 1.2vh, 14px);

  /* Border radius */
  --radius-sm: 4px;
  --radius: 6px;
  --radius-lg: clamp(6px, 1vw, 8px);
  --radius-xl: clamp(12px, 2vw, 16px);
}

/* ================================
   ANIMATION SYSTEM
   Timing functions, durations, shared keyframes
   ================================ */

:root {
  /* ===== Timing Functions ===== */

  --ease-linear: linear;
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ===== Durations ===== */

  --duration-fast: 200ms;
  --duration-normal: 300ms;
  --duration-slow: 400ms;
  --duration-slower: 800ms;
  --duration-slowest: 1200ms;
}

/* ===== Shared Keyframes ===== */

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slideDown {
  from {
    transform: translateY(-20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slideDownFromTop {
  from {
    transform: translateY(-100vh);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes stampDown {
  0% {
    transform: translateY(-20px) scale(1.2);
    opacity: 0;
  }
  50% {
    transform: translateY(5px) scale(0.95);
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

@keyframes dissolveToStardust {
  0% {
    opacity: 1;
    filter: blur(0px);
  }
  50% {
    /* Hold fully visible for first half */
    opacity: 1;
    filter: blur(0px);
  }
  75% {
    /* Begin texture - partial fade with blur emerging */
    opacity: 0.6;
    filter: blur(2px);
  }
  100% {
    /* Stardust texture - faded but visible, textured blur */
    opacity: 0.3;
    filter: blur(6px);
  }
}

/* Import components */

/* ================================
   FORM COMPONENTS
   Shared form patterns used across experiences
   ================================ */

/* ===== Base Form Field ===== */

.form-field {
  margin-bottom: var(--space-2xl);
}

.form-label {
  display: block;
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  margin-bottom: var(--space-sm);
  font-family: var(--font-editorial);
  color: var(--color-text-primary);
}

/* ===== Standard Inputs ===== */

.form-input {
  width: 100%;
  padding: var(--input-padding-y) var(--input-padding-x);
  font-size: var(--text-base);
  font-family: inherit;
  line-height: var(--leading-normal);
  color: var(--color-text-primary);
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-muted);
  border-radius: var(--radius-sm);
  transition: border-color var(--duration-fast) ease;
}

.form-input:focus {
  outline: none;
  border-color: var(--color-border);
}

.form-input::-moz-placeholder {
  color: var(--color-text-muted);
}

.form-input::placeholder {
  color: var(--color-text-muted);
}

/* ===== Handwritten Input Styles ===== */

.form-input-handwritten {
  border: none;
  border-bottom: 1px dotted rgba(0, 0, 0, 0.3);
  background: transparent;
  padding: var(--space-xs) 0;
  font-family: var(--font-handwriting);
  font-size: var(--text-handwriting-md);
  font-weight: var(--font-normal);
  border-radius: 0;
}

.form-input-handwritten:focus {
  border-bottom-color: rgba(0, 0, 0, 0.6);
}

.form-input-handwritten::-moz-placeholder {
  color: rgba(0, 0, 0, 0.3);
  font-style: italic;
}

.form-input-handwritten::placeholder {
  color: rgba(0, 0, 0, 0.3);
  font-style: italic;
}

/* ===== Textarea ===== */

.form-textarea {
  width: 100%;
  min-height: clamp(120px, 15vh, 180px);
  resize: vertical;
}

.form-textarea-handwritten {
  font-family: var(--font-handwriting);
  font-size: var(--text-handwriting-md);
  font-weight: var(--font-normal);
  line-height: 1.8em;
  border: none;
  border-bottom: 1px dotted rgba(0, 0, 0, 0.3);
  background: transparent;
  padding: var(--space-xs) 0;
  /* Ruled lines like paper */
  background-image: repeating-linear-gradient(
    transparent,
    transparent calc(1.8em - 1px),
    rgba(0, 0, 0, 0.08) calc(1.8em - 1px),
    rgba(0, 0, 0, 0.08) 1.8em
  );
  background-size: 100% 1.8em;
  background-position: 0 0;
}

.form-textarea-handwritten:focus {
  border-bottom-color: rgba(0, 0, 0, 0.6);
}

.form-textarea-handwritten::-moz-placeholder {
  color: rgba(0, 0, 0, 0.3);
  font-style: italic;
}

.form-textarea-handwritten::placeholder {
  color: rgba(0, 0, 0, 0.3);
  font-style: italic;
}

/* ===== Checkbox ===== */

.form-checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  cursor: pointer;
  font-family: var(--font-editorial);
  font-size: var(--text-md);
  font-weight: var(--font-normal);
  color: var(--color-text-secondary);
  line-height: var(--leading-normal);
}

.form-checkbox input[type="checkbox"] {
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid var(--color-black);
  background: var(--color-white);
  margin-top: 3px;
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
}

.form-checkbox input[type="checkbox"]:checked::after {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 15px;
  font-weight: bold;
  color: var(--color-black);
}

.form-checkbox-label {
  flex: 1;
  line-height: var(--leading-normal);
}

/* ===== Field Hints ===== */

.form-hint {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-sm);
  display: block;
}

/* Cookie Consent Banner - Shokuna Aesthetic */

.cookie-consent-wrapper {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  pointer-events: none;
}

.cookie-consent-banner {
  pointer-events: auto;
  background: var(--color-surface-default, #f8f6f0);
  border-top: 2px solid var(--color-ink-primary, #1a1a1a);
  padding: 1.5rem;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);

  /* Paper texture overlay */
  position: relative;
  background-image: url("/assets/paper-texture-9fa4ab2f.png");
  background-repeat: repeat;
  background-blend-mode: multiply;
}

.cookie-consent-banner.hidden {
  display: none;
}

.cookie-consent-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
  text-align: center;
}

.cookie-consent-message {
  font-family: 'PP Editorial Old', Georgia, serif;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-ink-primary, #1a1a1a);
  margin: 0;
  max-width: 600px;
}

.cookie-consent-actions {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}

.cookie-consent-button {
  font-family: 'PP Editorial Old', Georgia, serif;
  font-size: 0.95rem;
  padding: 0.65rem 1.5rem;
  border: 2px solid var(--color-ink-primary, #1a1a1a);
  background: transparent;
  color: var(--color-ink-primary, #1a1a1a);
  cursor: pointer;
  transition: all 0.2s ease;
  border-radius: 2px;
  text-decoration: none;
}

.cookie-consent-button:hover {
  background: var(--color-ink-primary, #1a1a1a);
  color: var(--color-surface-default, #f8f6f0);
  transform: translateY(-1px);
}

.cookie-consent-accept {
  font-weight: 500;
}

.cookie-consent-link {
  font-family: 'PP Editorial Old', Georgia, serif;
  font-size: 0.875rem;
  color: var(--color-ink-secondary, #666);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.2s ease;
}

.cookie-consent-link:hover {
  color: var(--color-ink-primary, #1a1a1a);
}

/* Mobile responsive */

@media (max-width: 640px) {
  .cookie-consent-banner {
    padding: 1rem;
  }

  .cookie-consent-content {
    gap: 0.75rem;
  }

  .cookie-consent-message {
    font-size: 0.9rem;
  }

  .cookie-consent-actions {
    flex-direction: column;
    width: 100%;
    gap: 0.5rem;
  }

  .cookie-consent-button {
    width: 100%;
    max-width: 300px;
  }
}

/* Ensure banner doesn't interfere with threshold animation */

@media (min-width: 1024px) {
  .cookie-consent-content {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }

  .cookie-consent-message {
    flex: 1;
  }

  .cookie-consent-actions {
    flex-shrink: 0;
  }
}

/* Import base styles */

/* ================================
   SHOKUNA DESIGN SYSTEM
   Base styles and resets
   ================================ */

/*
 * This file contains base resets and defaults.
 *
 * Design tokens are loaded separately in the layout:
 * - tokens/fonts.css, colors.css, typography.css, spacing.css, animations.css
 * - components/forms.css
 * - application.css (this file)
 * - story.css or inkwell.css (per-page)
 *
 * This multi-file approach works with Propshaft's asset serving model.
 */

/* ===== Base Reset & Defaults ===== */

html {
  box-sizing: border-box;
  scroll-behavior: smooth;
  overscroll-behavior: none; /* Prevent bounce/overscroll on all pages */
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
  -moz-user-select: none;
       user-select: none;
  -webkit-user-select: none;
}

body {
  font-family: var(--font-editorial);
  font-size: 100%;
  line-height: var(--leading-normal);
  color: var(--color-text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: visible;
  overscroll-behavior: none; /* Prevent bounce/overscroll on all pages */
}

/* Allow text selection in form inputs */

input,
textarea {
  -moz-user-select: text;
       user-select: text;
  -webkit-user-select: text;
}