/*
 * SealSign Platform -- Design System Foundation
 *
 * This stylesheet defines the visual language shared across the entire
 * SaaS platform: viewer, dialogs, dashboard, and any future modules.
 * All component styles should reference these tokens rather than
 * hard-coding colours, radii, or spacing values.
 */

/* ------------------------------------------------------------------ */
/*  1. Design Tokens (Custom Properties)                              */
/* ------------------------------------------------------------------ */

:root {
  /* -- Palette: Ink & Parchment ------------------------------------ */
  /*    A restrained, professional scheme inspired by ink on paper.   */
  /*    The primary "ink" is a deep blue-slate; the accent is a warm  */
  /*    amber that recalls a wax seal.                                */

  --ss-ink-950:  #0f172a;
  --ss-ink-900:  #1e293b;
  --ss-ink-800:  #1f2d40;
  --ss-ink-700:  #334155;
  --ss-ink-600:  #475569;
  --ss-ink-500:  #64748b;
  --ss-ink-400:  #94a3b8;
  --ss-ink-300:  #cbd5e1;
  --ss-ink-200:  #e2e8f0;
  --ss-ink-100:  #f1f5f9;
  --ss-ink-50:   #f8fafc;

  --ss-accent-700: #b45309;
  --ss-accent-600: #d97706;
  --ss-accent-500: #f59e0b;
  --ss-accent-400: #fbbf24;
  --ss-accent-300: #fcd34d;
  --ss-accent-200: #fde68a;
  --ss-accent-100: #fef3c7;

  --ss-positive-600: #16a34a;
  --ss-positive-500: #22c55e;

  --ss-danger-600: #dc2626;
  --ss-danger-500: #ef4444;

  --ss-white: #ffffff;

  /* -- Semantic Aliases --------------------------------------------- */
  --ss-bg:          var(--ss-ink-100);
  --ss-bg-surface:  var(--ss-white);
  --ss-bg-inset:    var(--ss-ink-200);
  --ss-bg-overlay:  rgba(15, 23, 42, 0.45);

  --ss-text:        var(--ss-ink-900);
  --ss-text-muted:  var(--ss-ink-500);
  --ss-text-faint:  var(--ss-ink-400);
  --ss-text-on-accent: var(--ss-ink-950);

  --ss-border:      var(--ss-ink-200);
  --ss-border-strong: var(--ss-ink-300);

  --ss-focus-ring:  rgba(245, 158, 11, 0.45);

  /* -- Typography -------------------------------------------------- */
  --ss-font-sans:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    "Fira Sans",
    "Droid Sans",
    "Helvetica Neue",
    sans-serif;

  --ss-font-mono:
    "JetBrains Mono",
    "Fira Code",
    "Cascadia Code",
    "SF Mono",
    ui-monospace,
    monospace;

  --ss-text-xs:   0.75rem;   /* 12px */
  --ss-text-sm:   0.8125rem; /* 13px */
  --ss-text-base: 0.875rem;  /* 14px */
  --ss-text-md:   1rem;      /* 16px */
  --ss-text-lg:   1.125rem;  /* 18px */
  --ss-text-xl:   1.5rem;    /* 24px */

  --ss-leading-tight:  1.25;
  --ss-leading-normal: 1.5;

  --ss-weight-normal:  400;
  --ss-weight-medium:  500;
  --ss-weight-semi:    600;
  --ss-weight-bold:    700;

  /* -- Spacing ----------------------------------------------------- */
  --ss-space-1:  0.25rem;  /* 4px  */
  --ss-space-2:  0.5rem;   /* 8px  */
  --ss-space-3:  0.75rem;  /* 12px */
  --ss-space-4:  1rem;     /* 16px */
  --ss-space-5:  1.25rem;  /* 20px */
  --ss-space-6:  1.5rem;   /* 24px */
  --ss-space-8:  2rem;     /* 32px */

  /* -- Shape ------------------------------------------------------- */
  --ss-radius-sm:  3px;
  --ss-radius-md:  5px;
  --ss-radius-lg:  8px;
  --ss-radius-xl:  12px;

  /* -- Shadows ----------------------------------------------------- */
  --ss-shadow-xs:  0 1px 2px rgba(15, 23, 42, 0.05);
  --ss-shadow-sm:  0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
  --ss-shadow-md:  0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
  --ss-shadow-lg:  0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.03);
  --ss-shadow-page: 0 2px 8px rgba(15, 23, 42, 0.12), 0 0 1px rgba(15, 23, 42, 0.08);

  /* -- Transitions ------------------------------------------------- */
  --ss-ease:      cubic-bezier(0.4, 0, 0.2, 1);
  --ss-duration:  150ms;
}


/* ------------------------------------------------------------------ */
/*  1b. Dark Mode Overrides                                           */
/* ------------------------------------------------------------------ */

@media (prefers-color-scheme: dark) {
  :root {
    --ss-bg:            var(--ss-ink-950);
    --ss-bg-surface:    var(--ss-ink-900);
    --ss-bg-inset:      #0b1120;
    --ss-bg-overlay:    rgba(0, 0, 0, 0.6);
    --ss-text:          var(--ss-ink-200);
    --ss-text-muted:    var(--ss-ink-400);
    --ss-text-faint:    var(--ss-ink-500);
    --ss-text-on-accent: var(--ss-ink-950);
    --ss-border:        #1f2d40;
    --ss-border-strong: var(--ss-ink-700);
    --ss-focus-ring:    rgba(251, 191, 36, 0.35);
    --ss-shadow-xs:     0 1px 2px rgba(0,0,0,0.2);
    --ss-shadow-sm:     0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.15);
    --ss-shadow-md:     0 4px 6px -1px rgba(0,0,0,0.3), 0 2px 4px -2px rgba(0,0,0,0.15);
    --ss-shadow-lg:     0 10px 15px -3px rgba(0,0,0,0.3), 0 4px 6px -4px rgba(0,0,0,0.1);
    --ss-shadow-page:   0 2px 12px rgba(0,0,0,0.4), 0 0 1px rgba(0,0,0,0.2);
  }

  .ss-btn:hover {
    background: var(--ss-ink-800);
  }
  .ss-btn--ghost:hover {
    background: var(--ss-ink-800);
  }
}

/* ------------------------------------------------------------------ */
/*  2. Reset & Base                                                   */
/* ------------------------------------------------------------------ */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--ss-font-sans);
  font-size: var(--ss-text-base);
  font-weight: var(--ss-weight-normal);
  line-height: var(--ss-leading-normal);
  color: var(--ss-text);
  background: var(--ss-bg);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}

ul, ol { list-style: none; }
strong  { font-weight: var(--ss-weight-semi); }
img     { display: block; max-width: 100%; }

a {
  color: var(--ss-accent-600);
  text-decoration: none;
}
a:hover {
  color: var(--ss-accent-700);
  text-decoration: underline;
}


/* ------------------------------------------------------------------ */
/*  3. Shared Component Primitives                                    */
/* ------------------------------------------------------------------ */

/* -- Buttons ------------------------------------------------------- */

.ss-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ss-space-2);
  height: 2rem;
  padding: 0 var(--ss-space-3);
  font-family: inherit;
  font-size: var(--ss-text-sm);
  font-weight: var(--ss-weight-medium);
  line-height: 1;
  white-space: nowrap;
  border: 1px solid var(--ss-border-strong);
  border-radius: var(--ss-radius-md);
  background: var(--ss-bg-surface);
  color: var(--ss-text);
  cursor: pointer;
  transition:
    background var(--ss-duration) var(--ss-ease),
    border-color var(--ss-duration) var(--ss-ease),
    box-shadow var(--ss-duration) var(--ss-ease);
  user-select: none;
}

.ss-btn:hover {
  background: var(--ss-ink-100);
  border-color: var(--ss-ink-400);
}

.ss-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--ss-bg-surface), 0 0 0 4px var(--ss-focus-ring);
}

.ss-btn:disabled {
  opacity: 0.4;
  pointer-events: none;
}

.ss-btn i,
.ss-btn svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* Accent variant */
.ss-btn--accent {
  background: var(--ss-accent-500);
  border-color: var(--ss-accent-600);
  color: var(--ss-text-on-accent);
}

.ss-btn--accent:hover {
  background: var(--ss-accent-400);
  border-color: var(--ss-accent-700);
}

/* Ghost variant */
.ss-btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--ss-text-muted);
}

.ss-btn--ghost:hover {
  background: var(--ss-ink-100);
  color: var(--ss-text);
}

/* Icon-only variant */
.ss-btn--icon {
  width: 2rem;
  padding: 0;
}

/* Small size */
.ss-btn--sm {
  height: 1.625rem;
  padding: 0 var(--ss-space-2);
  font-size: var(--ss-text-xs);
}

/* -- Inputs -------------------------------------------------------- */

.ss-input {
  height: 2rem;
  padding: 0 var(--ss-space-3);
  font-family: inherit;
  font-size: var(--ss-text-sm);
  line-height: 1;
  color: var(--ss-text);
  background: var(--ss-bg-surface);
  border: 1px solid var(--ss-border-strong);
  border-radius: var(--ss-radius-md);
  outline: none;
  transition:
    border-color var(--ss-duration) var(--ss-ease),
    box-shadow var(--ss-duration) var(--ss-ease);
}

.ss-input:focus {
  border-color: var(--ss-accent-500);
  box-shadow: 0 0 0 2px var(--ss-focus-ring);
}

.ss-input::placeholder {
  color: var(--ss-text-faint);
}

/* -- Dividers & separators ----------------------------------------- */

.ss-divider {
  width: 1px;
  height: 1.25rem;
  background: var(--ss-border);
  flex-shrink: 0;
}