/* Invoice Seal — compiled design tokens. Source of truth: the token files in design-system.
   (pulled from the Claude Design project). Edit there, recompile here. */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400;1,9..40,500&family=DM+Serif+Display:ital@0;1&family=DM+Mono:wght@400;500&display=swap');

/* =============================================================
   Invoice Seal — Typography Tokens
   NOTE: Using Google Fonts substitutes for DM Sans and DM Serif Display.
   Replace with self-hosted files if font matching is required.
   ============================================================= */


:root {
  /* ── Font Families ── */
  --font-sans:  'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-serif: 'DM Serif Display', Georgia, 'Times New Roman', serif;
  --font-mono:  'DM Mono', 'Fira Code', 'Menlo', 'Courier New', monospace;

  /* ── Font Sizes ── */
  --text-2xs: 0.6875rem;   /* 11px */
  --text-xs:  0.75rem;     /* 12px */
  --text-sm:  0.875rem;    /* 14px */
  --text-base:1rem;        /* 16px */
  --text-md:  1.0625rem;   /* 17px */
  --text-lg:  1.125rem;    /* 18px */
  --text-xl:  1.25rem;     /* 20px */
  --text-2xl: 1.5rem;      /* 24px */
  --text-3xl: 1.875rem;    /* 30px */
  --text-4xl: 2.25rem;     /* 36px */
  --text-5xl: 3rem;        /* 48px */
  --text-6xl: 3.75rem;     /* 60px */
  --text-7xl: 4.5rem;      /* 72px */

  /* ── Font Weights ── */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ── Line Heights ── */
  --leading-none:    1;
  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;
  --leading-loose:   1.8;

  /* ── Letter Spacing ── */
  --tracking-tightest: -0.04em;
  --tracking-tighter:  -0.025em;
  --tracking-tight:    -0.015em;
  --tracking-normal:    0em;
  --tracking-wide:      0.03em;
  --tracking-wider:     0.06em;
  --tracking-widest:    0.12em;

  /* ── Semantic: Display / Hero ── */
  --type-display-font:    var(--font-serif);
  --type-display-size:    var(--text-7xl);
  --type-display-weight:  var(--weight-regular);
  --type-display-leading: var(--leading-tight);
  --type-display-tracking: var(--tracking-tighter);

  /* ── Semantic: Headings ── */
  --type-h1-font:    var(--font-sans);
  --type-h1-size:    var(--text-5xl);
  --type-h1-weight:  var(--weight-semibold);
  --type-h1-leading: var(--leading-tight);
  --type-h1-tracking: var(--tracking-tight);

  --type-h2-font:    var(--font-sans);
  --type-h2-size:    var(--text-4xl);
  --type-h2-weight:  var(--weight-semibold);
  --type-h2-leading: var(--leading-snug);
  --type-h2-tracking: var(--tracking-tight);

  --type-h3-font:    var(--font-sans);
  --type-h3-size:    var(--text-2xl);
  --type-h3-weight:  var(--weight-semibold);
  --type-h3-leading: var(--leading-snug);
  --type-h3-tracking: var(--tracking-tight);

  --type-h4-font:    var(--font-sans);
  --type-h4-size:    var(--text-xl);
  --type-h4-weight:  var(--weight-semibold);
  --type-h4-leading: var(--leading-snug);
  --type-h4-tracking: var(--tracking-normal);

  /* ── Semantic: Body ── */
  --type-body-lg-size:    var(--text-lg);
  --type-body-lg-weight:  var(--weight-regular);
  --type-body-lg-leading: var(--leading-relaxed);

  --type-body-size:    var(--text-base);
  --type-body-weight:  var(--weight-regular);
  --type-body-leading: var(--leading-relaxed);

  --type-body-sm-size:    var(--text-sm);
  --type-body-sm-weight:  var(--weight-regular);
  --type-body-sm-leading: var(--leading-normal);

  /* ── Semantic: UI ── */
  --type-label-size:    var(--text-sm);
  --type-label-weight:  var(--weight-medium);
  --type-label-leading: var(--leading-tight);
  --type-label-tracking: var(--tracking-normal);

  --type-overline-size:    var(--text-xs);
  --type-overline-weight:  var(--weight-semibold);
  --type-overline-leading: var(--leading-tight);
  --type-overline-tracking: var(--tracking-widest);

  --type-caption-size:    var(--text-xs);
  --type-caption-weight:  var(--weight-regular);
  --type-caption-leading: var(--leading-normal);

  --type-button-size:    var(--text-sm);
  --type-button-weight:  var(--weight-semibold);
  --type-button-leading: var(--leading-none);
  --type-button-tracking: var(--tracking-wide);

  /* ── Semantic: Invoice / Financial ── */
  --type-amount-font:    var(--font-sans);
  --type-amount-size:    var(--text-3xl);
  --type-amount-weight:  var(--weight-light);
  --type-amount-leading: var(--leading-none);
  --type-amount-tracking: var(--tracking-tighter);

  --type-mono-size:    var(--text-sm);
  --type-mono-weight:  var(--weight-regular);
  --type-mono-leading: var(--leading-normal);
}

/* =============================================================
   Invoice Seal — Color Tokens
   ============================================================= */

:root {
  /* ── Primitive: Navy ── */
  --color-navy-950: #04101E;
  --color-navy-900: #0B1F3A;   /* Deep Navy — primary brand */
  --color-navy-800: #112638;
  --color-navy-700: #162D44;
  --color-navy-600: #243447;   /* Slate */
  --color-navy-500: #2E4260;
  --color-navy-400: #3D5270;

  /* ── Primitive: Blue ── */
  --color-blue-700: #1046A8;
  --color-blue-600: #1558C0;
  --color-blue-500: #1F6FEB;   /* Trust Blue — accent */
  --color-blue-400: #4D8EF0;
  --color-blue-300: #7AAEF5;
  --color-blue-200: #B3D0FA;
  --color-blue-100: #D9E8FC;
  --color-blue-50:  #EAF3FF;   /* Pale Blue */

  /* ── Primitive: Silver ── */
  --color-silver-500: #6B7E94;
  --color-silver-400: #8A9BB0;
  --color-silver-300: #A8B8C8;
  --color-silver-200: #C7D0DA;   /* Brushed Silver */
  --color-silver-150: #D8E0E8;
  --color-silver-100: #E2E8EF;
  --color-silver-50:  #F0F4F7;

  /* ── Primitive: White ── */
  --color-white:  #FFFFFF;
  --color-ice:    #F8FBFF;   /* Ice White */

  /* ── Primitive: Status ── */
  --color-green-700: #145C3D;
  --color-green-600: #187A50;
  --color-green-500: #1F9A63;   /* Paid */
  --color-green-200: #A7E3CB;
  --color-green-100: #D4F0E4;
  --color-green-50:  #EDFAF4;

  --color-amber-600: #B85E38;
  --color-amber-500: #D97757;   /* Pending */
  --color-amber-100: #FAEADE;
  --color-amber-50:  #FDF4EE;

  --color-red-600: #B83232;
  --color-red-500: #D94F4F;   /* Overdue */
  --color-red-100: #FDE8E8;
  --color-red-50:  #FEF4F4;

  /* ── Semantic: Backgrounds ── */
  --bg-base:        var(--color-ice);
  --bg-subtle:      var(--color-blue-50);
  --bg-muted:       var(--color-silver-50);
  --bg-inverse:     var(--color-navy-900);
  --bg-inverse-alt: var(--color-navy-600);

  /* ── Semantic: Surfaces ── */
  --surface-1: var(--color-white);
  --surface-2: var(--color-silver-50);
  --surface-3: var(--color-silver-100);
  --surface-overlay: rgba(11, 31, 58, 0.6);

  /* ── Semantic: Text ── */
  --text-primary:   var(--color-navy-900);
  --text-secondary: var(--color-navy-600);
  --text-tertiary:  var(--color-silver-400);
  --text-disabled:  var(--color-silver-300);
  --text-inverse:   var(--color-ice);
  --text-inverse-muted: rgba(248, 251, 255, 0.65);
  --text-brand:     var(--color-blue-500);
  --text-link:      var(--color-blue-600);

  /* ── Semantic: Borders ── */
  --border-subtle:  var(--color-silver-100);
  --border-default: var(--color-silver-200);
  --border-strong:  var(--color-silver-300);
  --border-brand:   var(--color-blue-500);
  --border-inverse: rgba(255, 255, 255, 0.12);

  /* ── Semantic: Accent ── */
  --accent-primary:  var(--color-blue-500);
  --accent-hover:    var(--color-blue-600);
  --accent-pressed:  var(--color-blue-700);
  --accent-subtle:   var(--color-blue-50);
  --accent-muted:    var(--color-blue-100);

  /* ── Semantic: Status ── */
  --status-paid:         var(--color-green-500);
  --status-paid-bg:      var(--color-green-50);
  --status-paid-border:  var(--color-green-200);

  --status-pending:        var(--color-amber-500);
  --status-pending-bg:     var(--color-amber-50);
  --status-pending-border: var(--color-amber-100);

  --status-overdue:        var(--color-red-500);
  --status-overdue-bg:     var(--color-red-50);
  --status-overdue-border: var(--color-red-100);

  --status-sealed:        var(--color-navy-600);
  --status-sealed-bg:     var(--color-blue-50);
  --status-sealed-border: var(--color-blue-100);

  --status-draft:        var(--color-silver-400);
  --status-draft-bg:     var(--color-silver-50);
  --status-draft-border: var(--color-silver-100);
}

/* =============================================================
   Invoice Seal — Spacing & Layout Tokens
   4px base unit
   ============================================================= */

:root {
  /* ── Base Scale ── */
  --space-0:   0;
  --space-px:  1px;
  --space-0-5: 0.125rem;  /* 2px */
  --space-1:   0.25rem;   /* 4px */
  --space-1-5: 0.375rem;  /* 6px */
  --space-2:   0.5rem;    /* 8px */
  --space-2-5: 0.625rem;  /* 10px */
  --space-3:   0.75rem;   /* 12px */
  --space-3-5: 0.875rem;  /* 14px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-7:   1.75rem;   /* 28px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-14:  3.5rem;    /* 56px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */
  --space-28:  7rem;      /* 112px */
  --space-32:  8rem;      /* 128px */
  --space-40:  10rem;     /* 160px */
  --space-48:  12rem;     /* 192px */
  --space-64:  16rem;     /* 256px */

  /* ── Border Radius ── */
  --radius-none: 0;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-3xl:  32px;
  --radius-full: 9999px;

  /* ── Semantic: Component Sizing ── */
  --height-xs:  1.75rem;   /* 28px — small badges */
  --height-sm:  2rem;      /* 32px — small inputs/buttons */
  --height-md:  2.5rem;    /* 40px — default inputs/buttons */
  --height-lg:  2.875rem;  /* 46px — large inputs/buttons */
  --height-xl:  3.25rem;   /* 52px — hero buttons */

  /* ── Semantic: Padding ── */
  --px-xs:  var(--space-2);    /* 8px */
  --px-sm:  var(--space-3);    /* 12px */
  --px-md:  var(--space-4);    /* 16px */
  --px-lg:  var(--space-5);    /* 20px */
  --px-xl:  var(--space-6);    /* 24px */
  --px-2xl: var(--space-8);    /* 32px */

  --py-xs:  var(--space-1);    /* 4px */
  --py-sm:  var(--space-1-5);  /* 6px */
  --py-md:  var(--space-2-5);  /* 10px */
  --py-lg:  var(--space-3);    /* 12px */

  /* ── Semantic: Layout ── */
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1280px;
  --container-2xl: 1440px;

  --sidebar-width: 240px;
  --sidebar-collapsed: 64px;

  /* ── Semantic: Z-index ── */
  --z-base:    0;    /* @kind other */
  --z-raised:  10;   /* @kind other */
  --z-dropdown:200;  /* @kind other */
  --z-sticky:  300;  /* @kind other */
  --z-overlay: 400;  /* @kind other */
  --z-modal:   500;  /* @kind other */
  --z-toast:   600;  /* @kind other */
  --z-tooltip: 700;  /* @kind other */
}

/* =============================================================
   Invoice Seal — Shadow & Elevation Tokens
   Navy-tinted shadows (not generic black)
   ============================================================= */

:root {
  /* ── Elevation Scale ── */
  --shadow-none: none;

  --shadow-xs:
    0 1px 2px 0 rgba(11, 31, 58, 0.06);

  --shadow-sm:
    0 1px 3px 0 rgba(11, 31, 58, 0.08),
    0 1px 2px -1px rgba(11, 31, 58, 0.05);

  --shadow-md:
    0 4px 6px -1px rgba(11, 31, 58, 0.08),
    0 2px 4px -2px rgba(11, 31, 58, 0.05);

  --shadow-lg:
    0 10px 15px -3px rgba(11, 31, 58, 0.10),
    0 4px 6px -4px rgba(11, 31, 58, 0.06);

  --shadow-xl:
    0 20px 25px -5px rgba(11, 31, 58, 0.12),
    0 8px 10px -6px rgba(11, 31, 58, 0.06);

  --shadow-2xl:
    0 25px 50px -12px rgba(11, 31, 58, 0.20);

  /* ── Inner shadows ── */
  --shadow-inner:
    inset 0 2px 4px 0 rgba(11, 31, 58, 0.06);

  --shadow-inner-sm:
    inset 0 1px 2px 0 rgba(11, 31, 58, 0.04);

  /* ── Colored / Brand shadows ── */
  --shadow-brand:
    0 8px 24px -4px rgba(31, 111, 235, 0.28),
    0 2px 8px -2px rgba(31, 111, 235, 0.12);

  --shadow-brand-sm:
    0 4px 12px -2px rgba(31, 111, 235, 0.20);

  /* ── Status shadows ── */
  --shadow-paid:
    0 4px 12px -2px rgba(31, 154, 99, 0.20);

  /* ── Focus rings ── */
  --ring-focus:       0 0 0 3px rgba(31, 111, 235, 0.30);
  --ring-focus-error: 0 0 0 3px rgba(217, 79, 79, 0.25);

  /* ── Card ── */
  --card-shadow:        var(--shadow-sm);
  --card-shadow-hover:  var(--shadow-md);
  --card-shadow-raised: var(--shadow-lg);

  /* ── Borders used alongside shadow ── */
  --card-border:      1px solid var(--border-subtle);
  --input-border:     1px solid var(--border-default);
  --input-border-focus: 1px solid var(--border-brand);
}

/* =============================================================
   Invoice Seal — Motion & Animation Tokens
   Calm, professional — no bouncy or playful easing
   ============================================================= */

:root {
  /* ── Easing ── */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);   /* @kind other */
  --ease-decel:    cubic-bezier(0, 0, 0.2, 1);   /* @kind other */
  --ease-accel:    cubic-bezier(0.4, 0, 1, 1);   /* @kind other */
  --ease-linear:   linear;                       /* @kind other */
  --ease-in-out:   cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */

  /* ── Duration ── */
  --duration-instant: 0ms;    /* @kind other */
  --duration-fast:    100ms;  /* @kind other */
  --duration-normal:  200ms;  /* @kind other */
  --duration-slow:    350ms;  /* @kind other */
  --duration-slower:  500ms;  /* @kind other */
  --duration-slowest: 800ms;  /* @kind other */

  /* ── Semantic ── */
  --transition-hover:  color var(--duration-fast) var(--ease-standard),
                       background-color var(--duration-fast) var(--ease-standard),
                       border-color var(--duration-fast) var(--ease-standard),
                       box-shadow var(--duration-fast) var(--ease-standard),
                       opacity var(--duration-fast) var(--ease-standard);

  --transition-transform: transform var(--duration-normal) var(--ease-decel);
  --transition-fade:      opacity var(--duration-normal) var(--ease-standard);
  --transition-slide:     transform var(--duration-normal) var(--ease-decel),
                          opacity var(--duration-normal) var(--ease-standard);
}

/* =============================================================
   Invoice Seal — Global Styles Entry Point
   Import this single file to use the complete design system.
   ============================================================= */


/* ── Base Reset ── */
*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  color: var(--text-primary);
  background-color: var(--bg-base);
}

/* ── Typography resets ── */
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: var(--weight-semibold); }
p { margin: 0; }
a { color: var(--text-link); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Focus visible ── */
:focus-visible {
  outline: none;
  box-shadow: var(--ring-focus);
}