@zapatran/paper-ember-theme 0.1.0

package/src/vars.css

@@ -0,0 +1,107 @@
+/* ======================================================================
+   CSS custom properties — fallback for contexts where @theme is not
+   processed by Tailwind (e.g. Storybook's multi-module CSS bundling).
+   In Tailwind single-pass contexts (playground, app builds) the @theme
+   block in tokens.css already outputs these via @layer theme, so this
+   file is harmlessly redundant there.
+   ====================================================================== */
+
+:root {
+  /* ── Paper ── */
+  --color-paper-50: #faf7f1;
+  --color-paper-100: #f4ede0;
+  --color-paper-200: #e9dcc2;
+  --color-paper-300: #dcc69d;
+  --color-paper-400: #c9aa78;
+  --color-paper-500: #b08e5b;
+  --color-paper-600: #92744a;
+  --color-paper-700: #735a3c;
+  --color-paper-800: #544231;
+  --color-paper-900: #382c22;
+  --color-paper-950: #1f1812;
+
+  /* ── Ember ── */
+  --color-ember-50: #fdf4ee;
+  --color-ember-100: #fae5d6;
+  --color-ember-200: #f4c9a7;
+  --color-ember-300: #eda472;
+  --color-ember-400: #e37f47;
+  --color-ember-500: #d5612f;
+  --color-ember-600: #bd4a23;
+  --color-ember-700: #9d3a20;
+  --color-ember-800: #7e2f1f;
+  --color-ember-900: #65271c;
+  --color-ember-950: #37120d;
+
+  /* ── Leaf ── */
+  --color-leaf-50: #f3f7ed;
+  --color-leaf-100: #e3eed5;
+  --color-leaf-200: #c8dcaf;
+  --color-leaf-300: #a4c382;
+  --color-leaf-400: #82a85e;
+  --color-leaf-500: #658c44;
+  --color-leaf-600: #4e6f33;
+  --color-leaf-700: #3e572b;
+  --color-leaf-800: #324624;
+  --color-leaf-900: #2a3b1f;
+
+  /* ── Honey ── */
+  --color-honey-50: #fdf8ec;
+  --color-honey-100: #fbedc7;
+  --color-honey-200: #f7d98c;
+  --color-honey-300: #f2c054;
+  --color-honey-400: #eda82b;
+  --color-honey-500: #d18a19;
+  --color-honey-600: #a86813;
+  --color-honey-700: #7e4d12;
+  --color-honey-800: #5c3a10;
+  --color-honey-900: #3f2a0d;
+
+  /* ── Rose ── */
+  --color-rose-50: #fdf2f0;
+  --color-rose-100: #fbdcd7;
+  --color-rose-200: #f6b6ad;
+  --color-rose-300: #ef8676;
+  --color-rose-400: #e25b46;
+  --color-rose-500: #c93f29;
+  --color-rose-600: #a82d1b;
+  --color-rose-700: #822417;
+  --color-rose-800: #5f1d14;
+  --color-rose-900: #3d1410;
+
+  /* ── Ink ── */
+  --color-ink-50: #eef3f8;
+  --color-ink-100: #d8e3ee;
+  --color-ink-200: #b1c5dc;
+  --color-ink-300: #83a4c6;
+  --color-ink-400: #5a85ad;
+  --color-ink-500: #3b6a92;
+  --color-ink-600: #2e5477;
+  --color-ink-700: #26425d;
+  --color-ink-800: #1f3447;
+  --color-ink-900: #172734;
+
+  /* ── Typography ── */
+  --font-family-sans: 'Figtree', ui-sans-serif, system-ui, sans-serif;
+  --font-family-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
+
+  /* ── Border Radius ── */
+  --radius-xs: 2px;
+  --radius-sm: 4px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+  --radius-xl: 16px;
+  --radius-2xl: 20px;
+  --radius-3xl: 28px;
+
+  /* ── Shadows ── */
+  --shadow-paper-1: 0 1px 2px rgba(56, 44, 34, 0.06), 0 1px 1px rgba(56, 44, 34, 0.04);
+  --shadow-paper-2: 0 2px 4px rgba(56, 44, 34, 0.06), 0 4px 8px rgba(56, 44, 34, 0.05);
+  --shadow-paper-3: 0 4px 8px rgba(56, 44, 34, 0.06), 0 12px 24px rgba(56, 44, 34, 0.07);
+  --shadow-paper-4: 0 8px 16px rgba(56, 44, 34, 0.08), 0 24px 48px rgba(56, 44, 34, 0.1);
+  --shadow-ember-glow: 0 6px 24px -8px rgba(213, 97, 47, 0.55);
+
+  /* ── Letter Spacing ── */
+  --tracking-tightish: -0.012em;
+  --tracking-tighter2: -0.022em;
+}