/* ==========================================================================
   Files Shop — Design System
   Bold editorial aesthetic · Earth tones (OKLCH) · Auto dark mode
   ========================================================================== */

@layer reset, tokens, base, layout, components, forms, utilities;

/* --------------------------------------------------------------------------
   RESET
   -------------------------------------------------------------------------- */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; }
  body { line-height: 1.5; -webkit-font-smoothing: antialiased; }
  img, picture, video, canvas, svg { display: block; max-width: 100%; }
  input, button, textarea, select { font: inherit; }
  p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
}

/* --------------------------------------------------------------------------
   TOKENS
   -------------------------------------------------------------------------- */
@layer tokens {
  :root {
    /* Earth-tone palette (OKLCH) */
    --color-soil:    oklch(0.25 0.02 60);
    --color-forest:  oklch(0.52 0.12 145);
    --color-sand:    oklch(0.92 0.03 80);
    --color-stone:   oklch(0.55 0.02 60);
    --color-clay:    oklch(0.55 0.15 30);
    --color-cream:   oklch(0.97 0.01 90);
    --color-moss:    oklch(0.45 0.08 145);

    /* Semantic */
    --bg:            var(--color-cream);
    --bg-surface:    var(--color-sand);
    --bg-surface-hover: oklch(0.89 0.03 80);
    --text:          var(--color-soil);
    --text-secondary: var(--color-stone);
    --text-on-primary: oklch(0.98 0.005 90);
    --border:        oklch(0.82 0.02 70);
    --border-focus:  var(--color-forest);
    --primary:       var(--color-forest);
    --primary-hover: var(--color-moss);
    --destructive:   var(--color-clay);
    --destructive-hover: oklch(0.48 0.15 30);

    /* Flash */
    --flash-notice-bg:   oklch(0.92 0.06 145);
    --flash-notice-text:  oklch(0.30 0.08 145);
    --flash-alert-bg:    oklch(0.92 0.08 30);
    --flash-alert-text:   oklch(0.35 0.12 30);

    /* Spacing */
    --space-xs:  0.25rem;
    --space-sm:  0.5rem;
    --space-md:  1rem;
    --space-lg:  1.5rem;
    --space-xl:  2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;

    /* Typography */
    --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
    --font-mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", "Liberation Mono", Menlo, monospace;
    --text-xs:   0.75rem;
    --text-sm:   0.875rem;
    --text-base: 1rem;
    --text-lg:   1.125rem;
    --text-xl:   1.25rem;
    --text-2xl:  1.75rem;
    --text-3xl:  2.25rem;

    /* Radii */
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;

    /* Shadows */
    --shadow-sm:  0 1px 2px oklch(0.25 0.02 60 / 0.06);
    --shadow-md:  0 2px 8px oklch(0.25 0.02 60 / 0.08);
    --shadow-lg:  0 8px 24px oklch(0.25 0.02 60 / 0.12);

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 200ms ease;
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --bg:               oklch(0.18 0.015 60);
      --bg-surface:       oklch(0.24 0.015 60);
      --bg-surface-hover: oklch(0.28 0.015 60);
      --text:             oklch(0.92 0.01 80);
      --text-secondary:   oklch(0.65 0.02 60);
      --text-on-primary:  oklch(0.98 0.005 90);
      --border:           oklch(0.35 0.015 60);
      --border-focus:     oklch(0.60 0.12 145);
      --primary:          oklch(0.60 0.12 145);
      --primary-hover:    oklch(0.55 0.12 145);
      --destructive:      oklch(0.62 0.14 30);
      --destructive-hover: oklch(0.55 0.14 30);

      --flash-notice-bg:   oklch(0.28 0.04 145);
      --flash-notice-text:  oklch(0.85 0.06 145);
      --flash-alert-bg:    oklch(0.28 0.06 30);
      --flash-alert-text:   oklch(0.85 0.08 30);

      --shadow-sm:  0 1px 2px oklch(0 0 0 / 0.2);
      --shadow-md:  0 2px 8px oklch(0 0 0 / 0.25);
      --shadow-lg:  0 8px 24px oklch(0 0 0 / 0.35);
    }
  }
}

/* --------------------------------------------------------------------------
   BASE
   -------------------------------------------------------------------------- */
@layer base {
  body {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    color: var(--text);
    background: var(--bg);
    line-height: 1.6;
  }

  h1, h2, h3, h4 {
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -0.01em;
  }

  h1 { font-size: var(--text-3xl); }
  h2 { font-size: var(--text-2xl); }
  h3 { font-size: var(--text-xl); }

  a {
    color: var(--primary);
    text-decoration: none;
    transition: color var(--transition-fast);
  }
  a:hover {
    color: var(--primary-hover);
  }

  strong { font-weight: 600; }

  code {
    font-family: var(--font-mono);
    font-size: 0.9em;
    background: var(--bg-surface);
    padding: 0.15em 0.35em;
    border-radius: var(--radius-sm);
  }

  hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: var(--space-lg) 0;
  }
}

/* --------------------------------------------------------------------------
   LAYOUT
   -------------------------------------------------------------------------- */
@layer layout {
  .dashboard {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }

  .nav {
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border);
    padding: var(--space-sm) var(--space-xl);
  }

  .nav-inner {
    max-width: 72rem;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
  }

  .nav-brand {
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--text);
    text-decoration: none;
    letter-spacing: -0.02em;
  }
  .nav-brand:hover {
    color: var(--text);
  }

  .nav-actions {
    display: flex;
    align-items: center;
    gap: var(--space-md);
  }

  .nav-link {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    font: inherit;
    transition: color var(--transition-fast);
  }
  .nav-link:hover {
    color: var(--text);
  }

  .container {
    max-width: 72rem;
    margin: 0 auto;
    padding: var(--space-2xl) var(--space-xl);
    flex: 1;
    width: 100%;
  }

  .page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    margin-bottom: var(--space-2xl);
    flex-wrap: wrap;
  }

  .page-header h1 {
    margin: 0;
  }

  /* Auth-centered layout (sign in) */
  .auth-layout {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-xl);
  }

  .auth-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-2xl) var(--space-2xl) var(--space-xl);
    width: 100%;
    max-width: 24rem;
    box-shadow: var(--shadow-lg);
  }

  .auth-card h1 {
    font-size: var(--text-2xl);
    text-align: center;
    margin-bottom: var(--space-xs);
  }

  .auth-card .auth-subtitle {
    text-align: center;
    color: var(--text-secondary);
    font-size: var(--text-sm);
    margin-bottom: var(--space-xl);
  }
}

/* --------------------------------------------------------------------------
   COMPONENTS
   -------------------------------------------------------------------------- */
@layer components {
  /* Buttons */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: 0.5rem 1rem;
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: 1.4;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    cursor: pointer;
    transition: all var(--transition-fast);
    text-decoration: none;
    white-space: nowrap;
  }

  .btn-primary {
    background: var(--primary);
    color: var(--text-on-primary);
    border-color: var(--primary);
  }
  .btn-primary:hover {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
    color: var(--text-on-primary);
  }

  .btn-secondary {
    background: var(--bg-surface);
    color: var(--text);
    border-color: var(--border);
  }
  .btn-secondary:hover {
    background: var(--bg-surface-hover);
  }

  .btn-ghost {
    background: transparent;
    color: var(--text-secondary);
    border-color: transparent;
    padding: 0.35rem 0.75rem;
  }
  .btn-ghost:hover {
    background: var(--bg-surface);
    color: var(--text);
  }

  .btn-destructive {
    background: transparent;
    color: var(--destructive);
    border-color: var(--destructive);
  }
  .btn-destructive:hover {
    background: var(--destructive);
    color: var(--text-on-primary);
  }

  .btn-sm {
    padding: 0.3rem 0.65rem;
    font-size: var(--text-xs);
  }

  .btn-block {
    width: 100%;
  }

  /* Cards */
  .card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    box-shadow: var(--shadow-sm);
  }

  .card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
  }

  .card-section {
    padding-top: var(--space-lg);
    border-top: 1px solid var(--border);
    margin-top: var(--space-lg);
  }

  /* Badge */
  .badge {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.55rem;
    font-size: var(--text-xs);
    font-weight: 600;
    border-radius: 9999px;
    letter-spacing: 0.02em;
  }

  .badge-success {
    background: var(--flash-notice-bg);
    color: var(--flash-notice-text);
  }

  .badge-pending {
    background: oklch(0.92 0.06 80);
    color: oklch(0.40 0.08 60);
  }

  @media (prefers-color-scheme: dark) {
    .badge-pending {
      background: oklch(0.30 0.04 80);
      color: oklch(0.78 0.06 80);
    }
  }

  /* Flash messages */
  .flash-container {
    position: fixed;
    top: var(--space-md);
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    width: 100%;
    max-width: 32rem;
    padding: 0 var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    pointer-events: none;
  }

  .flash {
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    box-shadow: var(--shadow-md);
    pointer-events: auto;
    animation: flash-in 0.3s ease;
  }

  .flash-notice {
    background: var(--flash-notice-bg);
    color: var(--flash-notice-text);
  }

  .flash-alert {
    background: var(--flash-alert-bg);
    color: var(--flash-alert-text);
  }

  .flash-dismiss {
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
    opacity: 0.6;
    padding: 0.25rem;
    line-height: 1;
    font-size: var(--text-lg);
  }
  .flash-dismiss:hover {
    opacity: 1;
  }

  .flash[data-hiding] {
    animation: flash-out 0.25s ease forwards;
  }

  @keyframes flash-in {
    from { opacity: 0; transform: translateY(-0.5rem); }
    to   { opacity: 1; transform: translateY(0); }
  }

  @keyframes flash-out {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(-0.5rem); }
  }

  /* Table */
  .table-wrap {
    overflow-x: auto;
  }

  .table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
  }

  .table th {
    text-align: left;
    padding: var(--space-sm) var(--space-md);
    font-weight: 600;
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    border-bottom: 2px solid var(--border);
  }

  .table td {
    padding: var(--space-sm) var(--space-md);
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
  }

  .table tr:last-child td {
    border-bottom: none;
  }

  .table-actions {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
  }

  /* Empty state */
  .empty-state {
    text-align: center;
    padding: var(--space-3xl) var(--space-xl);
    color: var(--text-secondary);
  }

  .empty-state-icon {
    font-size: 2.5rem;
    margin-bottom: var(--space-md);
    opacity: 0.5;
  }

  .empty-state h2 {
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--text);
    margin-bottom: var(--space-xs);
  }

  .empty-state p {
    margin-bottom: var(--space-lg);
    font-size: var(--text-sm);
  }

  /* Back link */
  .back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: var(--text-sm);
    color: var(--text-secondary);
    text-decoration: none;
    margin-bottom: var(--space-lg);
  }
  .back-link:hover {
    color: var(--text);
  }

  /* Payment link display */
  .payment-link {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-sm) var(--space-md);
    font-size: var(--text-sm);
    word-break: break-all;
  }

  .payment-link-url {
    flex: 1;
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
  }

  /* Product description */
  .product-description {
    color: var(--text-secondary);
    line-height: 1.7;
  }

  .product-price {
    font-size: var(--text-2xl);
    font-weight: 700;
    letter-spacing: -0.02em;
  }

  .product-meta {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    flex-wrap: wrap;
  }
}

/* --------------------------------------------------------------------------
   FORMS
   -------------------------------------------------------------------------- */
@layer forms {
  .form-group {
    margin-bottom: var(--space-lg);
  }

  .form-label {
    display: block;
    font-size: var(--text-sm);
    font-weight: 600;
    margin-bottom: var(--space-xs);
    color: var(--text);
  }

  .form-input,
  .form-textarea,
  .form-select {
    display: block;
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: var(--text-base);
    line-height: 1.5;
    color: var(--text);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  }

  .form-input:focus,
  .form-textarea:focus,
  .form-select:focus {
    outline: none;
    border-color: var(--border-focus);
    box-shadow: 0 0 0 3px oklch(0.52 0.12 145 / 0.15);
  }

  @media (prefers-color-scheme: dark) {
    .form-input:focus,
    .form-textarea:focus,
    .form-select:focus {
      box-shadow: 0 0 0 3px oklch(0.60 0.12 145 / 0.2);
    }
  }

  .form-textarea {
    min-height: 6rem;
    resize: vertical;
  }

  .form-hint {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    margin-top: var(--space-xs);
  }

  /* File upload */
  .file-upload {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    border: 2px dashed var(--border);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-fast), background var(--transition-fast);
    cursor: pointer;
  }
  .file-upload:hover {
    border-color: var(--primary);
    background: var(--bg-surface);
  }

  .file-upload input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
  }

  .file-upload-label {
    font-size: var(--text-sm);
    color: var(--text-secondary);
  }

  .file-upload-label strong {
    color: var(--primary);
  }

  /* Error states */
  .form-errors {
    background: var(--flash-alert-bg);
    color: var(--flash-alert-text);
    padding: var(--space-md);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-xl);
    font-size: var(--text-sm);
  }

  .form-errors h2 {
    font-size: var(--text-sm);
    font-weight: 600;
    margin-bottom: var(--space-sm);
  }

  .form-errors ul {
    margin: 0;
    padding-left: var(--space-lg);
  }

  .form-errors li {
    margin-bottom: var(--space-xs);
  }

  .field_with_errors input,
  .field_with_errors textarea,
  .field_with_errors select {
    border-color: var(--destructive);
  }
  .field_with_errors input:focus,
  .field_with_errors textarea:focus,
  .field_with_errors select:focus {
    box-shadow: 0 0 0 3px oklch(0.55 0.15 30 / 0.15);
  }
}

/* --------------------------------------------------------------------------
   UTILITIES
   -------------------------------------------------------------------------- */
@layer utilities {
  .text-muted    { color: var(--text-secondary); }
  .text-sm       { font-size: var(--text-sm); }
  .text-xs       { font-size: var(--text-xs); }
  .text-center   { text-align: center; }
  .font-mono     { font-family: var(--font-mono); }
  .font-semibold { font-weight: 600; }

  .flex       { display: flex; }
  .flex-wrap  { flex-wrap: wrap; }
  .items-center { align-items: center; }
  .justify-between { justify-content: space-between; }
  .gap-xs  { gap: var(--space-xs); }
  .gap-sm  { gap: var(--space-sm); }
  .gap-md  { gap: var(--space-md); }
  .gap-lg  { gap: var(--space-lg); }

  .mt-xs  { margin-top: var(--space-xs); }
  .mt-sm  { margin-top: var(--space-sm); }
  .mt-md  { margin-top: var(--space-md); }
  .mt-lg  { margin-top: var(--space-lg); }
  .mt-xl  { margin-top: var(--space-xl); }
  .mb-md  { margin-bottom: var(--space-md); }
  .mb-lg  { margin-bottom: var(--space-lg); }

  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }
}