@sirlund/mindset-ui 0.1.0

package/dist/styles.css

@@ -0,0 +1,1194 @@
+/* src/tokens/tokens.css */
+/**
+ * MindSet Design System - Design Tokens
+ * Auto-generated from Figma variables
+ * 
+ * Token Categories:
+ * - Primitives: Base scale, typography
+ * - Colors: Base colors, system colors, semantic colors
+ * - Dimensions: Spacing, radius, stroke
+ */
+
+:root {
+  /* ========================================
+     PRIMITIVES - Scale
+     ======================================== */
+  
+  --scale-0: 0px;
+  --scale-12-5: 1px;
+  --scale-25: 2px;
+  --scale-50: 4px;
+  --scale-75: 6px;
+  --scale-100: 8px;
+  --scale-150: 12px;
+  --scale-175: 14px;
+  --scale-200: 16px;
+  --scale-250: 20px;
+  --scale-300: 24px;
+  --scale-400: 32px;
+  --scale-500: 40px;
+  --scale-600: 48px;
+  --scale-700: 56px;
+  --scale-800: 64px;
+  --scale-900: 72px;
+  --scale-1000: 80px;
+  --scale-2000: 160px;
+  --scale-2500: 200px;
+
+  /* ========================================
+     PRIMITIVES - Typography
+     ======================================== */
+  
+  /* Font Families */
+  --font-family-default: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
+  --font-family-mono: 'Fira Code', 'Monaco', 'Courier New', monospace;
+  
+  /* Font Sizes */
+  --font-size-xs: var(--scale-150); /* 12px */
+  --font-size-s: var(--scale-175); /* 14px */
+  --font-size-m: var(--scale-200); /* 16px */
+  --font-size-l: var(--scale-250); /* 20px */
+  --font-size-xl: var(--scale-300); /* 24px */
+
+  /* ========================================
+     DIMENSIONS - Gap/Spacing
+     ======================================== */
+  
+  --gap-none: var(--scale-0); /* 0px */
+  --gap-3xs: var(--scale-25); /* 2px */
+  --gap-2xs: var(--scale-50); /* 4px */
+  --gap-xs: var(--scale-100); /* 8px */
+  --gap-s: var(--scale-150); /* 12px */
+  --gap-m: var(--scale-200); /* 16px */
+  --gap-l: var(--scale-250); /* 20px */
+  --gap-xl: var(--scale-300); /* 24px */
+  --gap-2xl: var(--scale-400); /* 32px */
+  --gap-3xl: var(--scale-500); /* 40px */
+  --gap-4xl: var(--scale-600); /* 48px */
+  --gap-5xl: var(--scale-700); /* 56px */
+  --gap-6xl: var(--scale-800); /* 64px */
+  --gap-7xl: var(--scale-1000); /* 80px */
+
+  /* ========================================
+     DIMENSIONS - Border Radius
+     ======================================== */
+  
+  --radius-none: 0px;
+  --radius-xs: var(--scale-50); /* 4px */
+  --radius-s: var(--scale-75); /* 6px */
+  --radius-m: var(--scale-100); /* 8px */
+  --radius-l: var(--scale-150); /* 12px */
+  --radius-xl: var(--scale-200); /* 16px */
+  --radius-rounded: 9999px; /* Fully rounded */
+
+  /* ========================================
+     DIMENSIONS - Stroke Width
+     ======================================== */
+  
+  --stroke-none: 0px;
+  --stroke-thin: 1px;
+  --stroke-light: 1.25px;
+  --stroke-medium: 1.5px;
+  --stroke-large: 2px;
+
+  /* ========================================
+     DIMENSIONS - Container Max Widths
+     ======================================== */
+  
+  --max-width-mobile: 480px;
+  --max-width-tablet-portrait: 768px;
+  --max-width-tablet-landscape: 1024px;
+  --max-width-desktop: 1440px;
+  --max-width-desktop-lg: 1600px;
+  --max-width-desktop-xl: 1980px;
+
+  /* ========================================
+     COLORS - Base (Light Mode)
+     ======================================== */
+  
+  /* Base Colors */
+  --color-base-black: rgb(18, 18, 19);
+  --color-base-white: rgb(254, 254, 255);
+  
+  /* Grey Scale */
+  --color-grey-100: rgb(246, 246, 247);
+  --color-grey-200: rgb(234, 234, 234);
+  --color-grey-300: rgb(204, 204, 205);
+  --color-grey-400: rgb(153, 153, 154);
+  --color-grey-500: rgb(109, 109, 110);
+  --color-grey-600: rgb(63, 63, 70);
+  --color-grey-700: rgb(41, 41, 42);
+  
+  /* Blue Scale */
+  --color-blue-100: rgb(232, 243, 255);
+  --color-blue-200: rgb(180, 211, 255);
+  --color-blue-300: rgb(76, 150, 255);
+  --color-blue-400: rgb(0, 105, 255);
+  --color-blue-500: rgb(0, 75, 183);
+  --color-blue-600: rgb(0, 46, 111);
+  --color-blue-700: rgb(0, 31, 75);
+  
+  /* Red Scale */
+  --color-red-100: rgb(255, 243, 241);
+  --color-red-200: rgb(254, 209, 201);
+  --color-red-300: rgb(237, 115, 99);
+  --color-red-400: rgb(205, 73, 55);
+  --color-red-500: rgb(189, 54, 36);
+  --color-red-600: rgb(168, 32, 13);
+  --color-red-700: rgb(128, 20, 5);
+  
+  /* Green Scale */
+  --color-green-100: rgb(240, 254, 241);
+  --color-green-200: rgb(204, 238, 206);
+  --color-green-300: rgb(104, 178, 111);
+  --color-green-400: rgb(52, 134, 60);
+  --color-green-500: rgb(18, 121, 29);
+  --color-green-600: rgb(8, 93, 17);
+  --color-green-700: rgb(3, 65, 10);
+  
+  /* Yellow Scale */
+  --color-yellow-100: rgb(255, 249, 227);
+  --color-yellow-200: rgb(253, 239, 190);
+  --color-yellow-300: rgb(245, 218, 117);
+  --color-yellow-400: rgb(237, 200, 67);
+  --color-yellow-500: rgb(177, 142, 14);
+  --color-yellow-600: rgb(129, 101, 0);
+  --color-yellow-700: rgb(87, 68, 0);
+  
+  /* Pink Scale */
+  --color-pink-100: rgb(252, 228, 236);
+  --color-pink-200: rgb(246, 179, 200);
+  --color-pink-300: rgb(241, 130, 165);
+  --color-pink-400: rgb(235, 81, 129);
+  --color-pink-500: rgb(169, 58, 93);
+  --color-pink-600: rgb(102, 35, 56);
+  --color-pink-700: rgb(69, 24, 38);
+  
+  /* Jade Scale */
+  --color-jade-100: rgb(223, 247, 237);
+  --color-jade-200: rgb(164, 232, 205);
+  --color-jade-300: rgb(104, 217, 172);
+  --color-jade-400: rgb(45, 202, 140);
+  --color-jade-500: rgb(32, 145, 100);
+  --color-jade-600: rgb(20, 88, 61);
+  --color-jade-700: rgb(13, 59, 41);
+  
+  /* Violet Scale */
+  --color-violet-100: rgb(235, 230, 246);
+  --color-violet-200: rgb(197, 183, 228);
+  --color-violet-300: rgb(160, 136, 211);
+  --color-violet-400: rgb(122, 89, 194);
+  --color-violet-500: rgb(88, 64, 139);
+  --color-violet-600: rgb(53, 39, 84);
+  --color-violet-700: rgb(36, 26, 57);
+  
+  /* Amber Scale */
+  --color-amber-100: rgb(251, 239, 225);
+  --color-amber-200: rgb(243, 210, 170);
+  --color-amber-300: rgb(236, 181, 114);
+  --color-amber-400: rgb(228, 152, 59);
+  --color-amber-500: rgb(164, 109, 42);
+  --color-amber-600: rgb(99, 66, 26);
+  --color-amber-700: rgb(67, 45, 17);
+  
+  /* Teal Scale */
+  --color-teal-100: rgb(227, 239, 243);
+  --color-teal-200: rgb(177, 210, 220);
+  --color-teal-300: rgb(126, 180, 197);
+  --color-teal-400: rgb(75, 151, 174);
+  --color-teal-500: rgb(54, 108, 125);
+  --color-teal-600: rgb(33, 66, 76);
+  --color-teal-700: rgb(22, 44, 51);
+
+  /* Alpha Colors */
+  --color-alpha-black-100: rgba(18, 18, 19, 0.1);
+  --color-alpha-black-200: rgba(18, 18, 19, 0.2);
+  --color-alpha-black-300: rgba(18, 18, 19, 0.25);
+  --color-alpha-black-400: rgba(18, 18, 19, 0.4);
+  --color-alpha-black-500: rgba(18, 18, 19, 0.5);
+  --color-alpha-black-600: rgba(18, 18, 19, 0.6);
+  --color-alpha-black-700: rgba(18, 18, 19, 0.7);
+  --color-alpha-black-800: rgba(18, 18, 19, 0.85);
+  
+  --color-alpha-white-100: rgba(254, 254, 255, 0.2);
+  --color-alpha-white-200: rgba(254, 254, 255, 0.3);
+  --color-alpha-white-300: rgba(254, 254, 255, 0.4);
+  --color-alpha-white-400: rgba(254, 254, 255, 0.5);
+  --color-alpha-white-500: rgba(254, 254, 255, 0.6);
+  --color-alpha-white-600: rgba(254, 254, 255, 0.7);
+  --color-alpha-white-700: rgba(254, 254, 255, 0.8);
+  --color-alpha-white-800: rgba(254, 254, 255, 0.9);
+
+  /* ========================================
+     SYSTEM COLORS - Semantic Tokens (Light Mode)
+     ======================================== */
+  
+  /* Accent Colors */
+  --color-accent-default: var(--color-blue-400);
+  --color-accent-subtle: var(--color-blue-300);
+  --color-accent-strong: var(--color-blue-600);
+  --color-accent-lighter: var(--color-blue-100);
+  --color-accent-light: var(--color-blue-200);
+  
+  /* Primary Colors */
+  --color-primary-default: var(--color-base-black);
+  --color-primary-inverted: var(--color-base-white);
+  --color-primary-subtle: var(--color-grey-500);
+  --color-primary-light: var(--color-grey-200);
+  
+  /* Surface Colors */
+  --color-surface-background: var(--color-base-white);
+  --color-surface-background-inverted: var(--color-base-black);
+  --color-surface-background-inverted-alpha: var(--color-alpha-black-800);
+  --color-surface-layer: var(--color-grey-100);
+  --color-surface-layer-strong: var(--color-grey-200);
+  --color-surface-layer-stronger: var(--color-grey-300);
+  --color-surface-elevated: var(--color-base-white);
+  --color-surface-elevated-inverted: var(--color-base-black);
+  --color-surface-accent: var(--color-blue-400);
+  --color-surface-input: var(--color-alpha-white-500);
+  
+  /* Content/Text Colors */
+  --color-content-heading: var(--color-base-black);
+  --color-content-primary: var(--color-grey-700);
+  --color-content-secondary: var(--color-grey-500);
+  --color-content-disabled: var(--color-grey-400);
+  --color-content-inverted: var(--color-base-white);
+  --color-content-accent: var(--color-blue-400);
+  --color-content-error: var(--color-red-400);
+  --color-content-success: var(--color-green-400);
+  --color-content-warning: var(--color-yellow-400);
+  
+  /* Content On Inverted */
+  --color-content-on-inverted-heading: var(--color-base-white);
+  --color-content-on-inverted-primary: var(--color-grey-100);
+  --color-content-on-inverted-secondary: var(--color-grey-400);
+  --color-content-on-inverted-disabled: var(--color-grey-500);
+  --color-content-on-inverted-accent: var(--color-blue-300);
+  
+  /* Icon Colors */
+  --color-icon-primary: var(--color-grey-700);
+  --color-icon-secondary: var(--color-grey-500);
+  --color-icon-disabled: var(--color-grey-400);
+  --color-icon-inverted: var(--color-base-white);
+  --color-icon-accent: var(--color-blue-400);
+  --color-icon-accent-subtle: var(--color-blue-300);
+  --color-icon-accent-strong: var(--color-blue-500);
+  --color-icon-error: var(--color-red-400);
+  --color-icon-success: var(--color-green-400);
+  --color-icon-warning: var(--color-yellow-400);
+  
+  /* Icon On Inverted */
+  --color-icon-on-inverted-primary: var(--color-grey-100);
+  --color-icon-on-inverted-secondary: var(--color-grey-400);
+  --color-icon-on-inverted-disabled: var(--color-grey-500);
+  --color-icon-on-inverted-accent: var(--color-blue-300);
+  
+  /* Stroke/Border Colors */
+  --color-stroke-subtle: var(--color-grey-200);
+  --color-stroke-medium: var(--color-grey-300);
+  --color-stroke-strong: var(--color-grey-400);
+  --color-stroke-alpha-subtle: var(--color-alpha-black-100);
+  --color-stroke-alpha-medium: var(--color-alpha-black-300);
+  --color-stroke-alpha-strong: var(--color-alpha-black-500);
+  
+  /* Stroke On Dark */
+  --color-stroke-on-dark-subtle: var(--color-grey-600);
+  --color-stroke-on-dark-medium: var(--color-grey-500);
+  --color-stroke-on-dark-strong: var(--color-grey-400);
+  --color-stroke-on-dark-alpha-subtle: var(--color-alpha-white-100);
+  --color-stroke-on-dark-alpha-medium: var(--color-alpha-white-300);
+  --color-stroke-on-dark-alpha-strong: var(--color-alpha-white-500);
+  
+  /* Feedback Colors */
+  --color-feedback-negative-light: var(--color-red-100);
+  --color-feedback-negative-default: var(--color-red-400);
+  --color-feedback-negative-strong: var(--color-red-600);
+  
+  --color-feedback-positive-light: var(--color-green-100);
+  --color-feedback-positive-default: var(--color-green-400);
+  --color-feedback-positive-strong: var(--color-green-600);
+  
+  --color-feedback-warning-light: var(--color-yellow-100);
+  --color-feedback-warning-default: var(--color-yellow-400);
+  --color-feedback-warning-strong: var(--color-yellow-500);
+  
+  /* Build System Colors (for code/tech contexts) */
+  --color-build-action: var(--color-jade-400);
+  --color-build-data: var(--color-violet-400);
+  --color-build-function: var(--color-amber-400);
+  --color-build-input: var(--color-teal-400);
+  --color-build-workflow: var(--color-pink-400);
+}
+
+/* ========================================
+   DARK MODE OVERRIDES
+   ======================================== */
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    /* System Colors - Dark Mode adjustments */
+    --color-accent-lighter: var(--color-blue-700);
+    --color-accent-light: var(--color-blue-600);
+    --color-accent-subtle: var(--color-blue-500);
+    --color-accent-strong: var(--color-blue-300);
+    
+    --color-primary-default: var(--color-base-white);
+    --color-primary-inverted: var(--color-base-black);
+    --color-primary-subtle: var(--color-grey-300);
+    --color-primary-light: var(--color-grey-700);
+    
+    --color-surface-background: var(--color-base-black);
+    --color-surface-background-inverted: var(--color-base-white);
+    --color-surface-background-inverted-alpha: var(--color-alpha-grey-600-800);
+    --color-surface-layer: var(--color-grey-700);
+    --color-surface-layer-strong: var(--color-grey-600);
+    --color-surface-layer-stronger: var(--color-grey-500);
+    --color-surface-elevated: var(--color-grey-600);
+    --color-surface-elevated-inverted: var(--color-grey-600);
+    --color-surface-accent: var(--color-blue-600);
+    --color-surface-input: var(--color-alpha-black-500);
+    
+    --color-content-heading: var(--color-base-white);
+    --color-content-primary: var(--color-grey-300);
+    --color-content-secondary: var(--color-grey-400);
+    --color-content-disabled: var(--color-grey-500);
+    --color-content-inverted: var(--color-base-black);
+    --color-content-accent: var(--color-blue-300);
+    --color-content-error: var(--color-red-300);
+    --color-content-success: var(--color-green-300);
+    --color-content-warning: var(--color-yellow-300);
+    
+    --color-icon-primary: var(--color-grey-300);
+    --color-icon-secondary: var(--color-grey-400);
+    --color-icon-disabled: var(--color-grey-500);
+    --color-icon-inverted: var(--color-base-black);
+    --color-icon-accent: var(--color-blue-300);
+    --color-icon-accent-subtle: var(--color-blue-400);
+    --color-icon-accent-strong: var(--color-blue-200);
+    --color-icon-error: var(--color-red-300);
+    --color-icon-success: var(--color-green-300);
+    --color-icon-warning: var(--color-yellow-300);
+    
+    --color-stroke-subtle: var(--color-grey-600);
+    --color-stroke-medium: var(--color-grey-500);
+    --color-stroke-strong: var(--color-grey-400);
+    --color-stroke-alpha-subtle: var(--color-alpha-white-100);
+    --color-stroke-alpha-medium: var(--color-alpha-white-300);
+    --color-stroke-alpha-strong: var(--color-alpha-white-500);
+    
+    --color-feedback-negative-light: var(--color-red-700);
+    --color-feedback-negative-strong: var(--color-red-300);
+    
+    --color-feedback-positive-light: var(--color-green-700);
+    --color-feedback-positive-strong: var(--color-green-300);
+    
+    --color-feedback-warning-light: var(--color-yellow-700);
+    --color-feedback-warning-strong: var(--color-yellow-300);
+    
+    --color-build-action: var(--color-jade-300);
+    --color-build-data: var(--color-violet-300);
+    --color-build-function: var(--color-amber-300);
+    --color-build-input: var(--color-teal-300);
+    --color-build-workflow: var(--color-pink-300);
+  }
+}
+
+
+/* src/components/Button/Button.css */
+/* Import design tokens */
+@import '../../tokens/tokens.css';
+
+/* Button Base Styles */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--gap-xs);
+  border: none;
+  border-radius: var(--radius-m);
+  font-family: var(--font-family-default);
+  font-weight: 500;
+  text-decoration: none;
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+  position: relative;
+  outline: none;
+  user-select: none;
+  white-space: nowrap;
+}
+
+.btn:focus-visible {
+  outline: 2px solid var(--color-accent-default);
+  outline-offset: 2px;
+}
+
+/* Button Sizes */
+.btn--xsmall {
+  padding: var(--gap-3xs) var(--gap-2xs);
+  font-size: var(--font-size-xs);
+  line-height: 16px;
+  min-height: var(--scale-300);
+}
+
+.btn--small {
+  padding: var(--gap-2xs) var(--gap-s);
+  font-size: var(--font-size-s);
+  line-height: 20px;
+  min-height: var(--scale-400);
+}
+
+.btn--medium {
+  padding: var(--gap-xs) var(--gap-m);
+  font-size: var(--font-size-m);
+  line-height: 24px;
+  min-height: var(--scale-500);
+}
+
+.btn--large {
+  padding: var(--gap-s) var(--gap-xl);
+  font-size: 18px;
+  line-height: 28px;
+  min-height: var(--scale-600);
+}
+
+/* Button Variants */
+/* Primary = Dark/Inverted background */
+.btn--primary {
+  background-color: var(--color-surface-background-inverted);
+  color: var(--color-content-on-inverted-heading);
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+}
+
+.btn--primary:hover:not(.btn--disabled):not(.btn--loading) {
+  background-color: var(--color-surface-background-inverted);
+  opacity: 0.9;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+}
+
+.btn--primary:active:not(.btn--disabled):not(.btn--loading) {
+  background-color: var(--color-surface-background-inverted);
+  opacity: 0.8;
+  transform: translateY(1px);
+}
+
+/* Accent = Blue/Secondary */
+.btn--accent {
+  background-color: var(--color-accent-default);
+  color: var(--color-content-on-inverted-heading);
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+}
+
+.btn--accent:hover:not(.btn--disabled):not(.btn--loading) {
+  background-color: var(--color-accent-strong);
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+}
+
+.btn--accent:active:not(.btn--disabled):not(.btn--loading) {
+  background-color: var(--color-accent-strong);
+  transform: translateY(1px);
+}
+
+/* Tertiary = Ghost with border */
+.btn--tertiary {
+  background-color: transparent;
+  color: var(--color-accent-default);
+  border: var(--stroke-thin) solid var(--color-stroke-medium);
+}
+
+.btn--tertiary:hover:not(.btn--disabled):not(.btn--loading) {
+  background-color: var(--color-accent-weaker);
+  border-color: var(--color-stroke-medium);
+}
+
+.btn--tertiary:active:not(.btn--disabled):not(.btn--loading) {
+  background-color: var(--color-accent-weak);
+  transform: translateY(1px);
+}
+
+/* Text = No background or border */
+.btn--text {
+  background-color: transparent;
+  color: var(--color-accent-default);
+  border: none;
+  box-shadow: none;
+}
+
+.btn--text:hover:not(.btn--disabled):not(.btn--loading) {
+  background-color: var(--color-accent-weaker);
+}
+
+.btn--text:active:not(.btn--disabled):not(.btn--loading) {
+  background-color: var(--color-accent-weak);
+  transform: translateY(1px);
+}
+
+/* Danger = Destructive actions */
+.btn--danger {
+  background-color: var(--color-feedback-negative-default);
+  color: var(--color-content-on-inverted-heading);
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+}
+
+.btn--danger:hover:not(.btn--disabled):not(.btn--loading) {
+  background-color: var(--color-feedback-negative-strong);
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+}
+
+.btn--danger:active:not(.btn--disabled):not(.btn--loading) {
+  background-color: var(--color-feedback-negative-strong);
+  transform: translateY(1px);
+}
+
+/* Button States */
+.btn--disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.btn--loading {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.btn--full-width {
+  width: 100%;
+}
+
+/* Button Content */
+.btn__content {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-xs);
+}
+
+.btn__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.btn__icon--start {
+  margin-right: 0;
+}
+
+.btn__icon--end {
+  margin-left: 0;
+}
+
+/* Loading Spinner */
+.btn__spinner {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  margin-right: var(--gap-xs);
+}
+
+.btn__spinner-icon {
+  width: var(--scale-200);
+  height: var(--scale-200);
+  animation: spin 0.8s linear infinite;
+}
+
+.btn--xsmall .btn__spinner-icon {
+  width: var(--scale-150);
+  height: var(--scale-150);
+}
+
+.btn--small .btn__spinner-icon {
+  width: var(--scale-175);
+  height: var(--scale-175);
+}
+
+.btn--large .btn__spinner-icon {
+  width: var(--scale-225);
+  height: var(--scale-225);
+}
+
+.btn__spinner-circle {
+  stroke-dasharray: 60;
+  stroke-dashoffset: 45;
+  transform-origin: center;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* Responsive Design */
+@media (max-width: 640px) {
+  .btn--large {
+    padding: var(--gap-2xs) var(--gap-l);
+    font-size: var(--font-size-m);
+    min-height: var(--scale-550);
+  }
+  
+  .btn--medium {
+    padding: var(--gap-xs) var(--gap-s);
+    font-size: var(--font-size-s);
+    min-height: var(--scale-500);
+  }
+}
+
+
+/* src/components/Card/Card.css */
+@import '../../tokens/tokens.css';
+
+/* Card Base Styles */
+.card {
+  background-color: var(--color-surface-default);
+  border-radius: var(--radius-m);
+  border: var(--stroke-thin) solid var(--color-stroke-subtle);
+  overflow: hidden;
+  width: 100%;
+  max-width: var(--max-width-tablet);
+}
+
+.card__container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+/* Card Header */
+.card__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--gap-l);
+  gap: var(--gap-m);
+}
+
+.card__header-title {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-xs);
+  flex: 1;
+}
+
+.card__header-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--scale-400);
+  height: var(--scale-400);
+  flex-shrink: 0;
+}
+
+.card__header-text {
+  font-family: var(--font-family-default);
+  font-size: var(--font-size-s);
+  font-weight: 600;
+  line-height: 1.1;
+  color: var(--color-content-secondary);
+  white-space: nowrap;
+}
+
+.card__header-action {
+  height: var(--scale-400);
+  min-width: var(--scale-800);
+  max-width: var(--max-width-tablet);
+}
+
+.card__action-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  padding: 0 var(--gap-m);
+  border: none;
+  background: transparent;
+  border-radius: var(--radius-s);
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+}
+
+.card__action-button:hover {
+  background-color: var(--color-surface-layer);
+}
+
+.card__action-text {
+  font-family: var(--font-family-default);
+  font-size: var(--font-size-s);
+  font-weight: 600;
+  line-height: 1.2;
+  color: var(--color-accent-default);
+  white-space: nowrap;
+}
+
+/* Card Body */
+.card__body {
+  padding: var(--gap-l);
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-xs);
+}
+
+.card__content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-l);
+}
+
+/* Plan Section */
+.card__plan {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-s);
+}
+
+.card__plan-icon {
+  width: var(--scale-500);
+  height: var(--scale-500);
+  flex-shrink: 0;
+}
+
+.card__plan-name {
+  font-family: var(--font-family-default);
+  font-size: var(--scale-400);
+  font-weight: 600;
+  line-height: 1.2;
+  color: var(--color-content-primary);
+  flex: 1;
+}
+
+/* Price Section */
+.card__price-section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-xs);
+}
+
+.card__price {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-xs);
+  font-family: var(--font-family-default);
+  font-weight: 600;
+}
+
+.card__price-currency {
+  font-size: var(--font-size-l);
+  line-height: 1.3;
+  color: var(--color-content-secondary);
+}
+
+.card__price-amount {
+  font-size: var(--font-size-xl);
+  line-height: 1.2;
+  color: var(--color-content-primary);
+}
+
+.card__price-period {
+  font-size: var(--font-size-l);
+  line-height: 1.3;
+  color: var(--color-content-secondary);
+  width: var(--scale-1750);
+}
+
+/* Seats Section */
+.card__seats {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-xs);
+}
+
+.card__seats-divider {
+  height: var(--stroke-thin);
+  background-color: var(--color-stroke-subtle);
+  margin: var(--gap-xs) 0;
+}
+
+.card__seats-info {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0;
+}
+
+.card__seats-count {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-xs);
+  font-family: var(--font-family-default);
+  font-size: var(--font-size-s);
+  font-weight: 600;
+  line-height: 1.1;
+  color: var(--color-content-tertiary);
+  flex: 1;
+}
+
+.card__seats-teams {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-xs);
+}
+
+.card__seats-multiplier {
+  font-size: var(--font-size-l);
+  line-height: 1.3;
+  color: var(--color-content-secondary);
+}
+
+.card__seats-number {
+  font-size: var(--font-size-xl);
+  line-height: 1.2;
+  color: var(--color-content-primary);
+}
+
+.card__seats-text {
+  font-size: var(--font-size-l);
+  line-height: 1.3;
+  color: var(--color-content-secondary);
+}
+
+.card__seats-edit {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: var(--scale-400);
+  padding: 0 var(--gap-3xs);
+  border: none;
+  background: transparent;
+  border-radius: var(--radius-s);
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+}
+
+.card__seats-edit:hover {
+  background-color: var(--color-surface-layer);
+}
+
+.card__seats-edit span {
+  font-family: var(--font-family-default);
+  font-size: var(--font-size-s);
+  font-weight: 600;
+  line-height: 1.2;
+  color: var(--color-accent-default);
+}
+
+.card__seats-upgrade {
+  font-family: var(--font-family-default);
+  font-size: var(--font-size-xs);
+  font-weight: 400;
+  line-height: 1.2;
+  color: var(--color-content-tertiary);
+  text-align: right;
+  width: var(--scale-1600);
+}
+
+/* Card Footer */
+.card__footer {
+  background-color: var(--color-surface-layer);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--gap-m) var(--gap-l);
+  gap: var(--gap-m);
+  border-radius: 0 0 var(--radius-m) var(--radius-m);
+}
+
+.card__footer-left {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-xs);
+  flex: 1;
+}
+
+.card__footer-price {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-3xs);
+  font-family: var(--font-family-default);
+  font-weight: 600;
+}
+
+.card__footer-currency {
+  font-size: var(--font-size-xl);
+  line-height: 1.2;
+  color: var(--color-content-secondary);
+}
+
+.card__footer-amount {
+  font-size: var(--scale-400);
+  line-height: 1.2;
+  color: var(--color-content-primary);
+}
+
+.card__footer-label {
+  font-family: var(--font-family-default);
+  font-size: var(--font-size-s);
+  font-weight: 400;
+  line-height: 1.2;
+  color: var(--color-content-primary);
+  flex: 1;
+}
+
+.card__footer-right {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  justify-content: center;
+  min-width: var(--scale-1250);
+}
+
+.card__footer-renewal {
+  font-family: var(--font-family-default);
+  font-size: var(--font-size-s);
+  font-weight: 400;
+  line-height: 1.2;
+  color: var(--color-content-secondary);
+}
+
+.card__footer-date {
+  font-family: var(--font-family-default);
+  font-size: var(--font-size-s);
+  font-weight: 400;
+  line-height: 1.2;
+  color: var(--color-content-secondary);
+}
+
+/* Plan Icons */
+.plan-icon {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.plan-icon__square {
+  position: absolute;
+  background-color: var(--color-surface-layer-strong);
+  border-radius: var(--radius-xs);
+}
+
+/* Starter Plan Icons */
+.plan-icon--starter .plan-icon__square--left {
+  top: 27.5%;
+  left: 0;
+  right: 55%;
+  bottom: 27.5%;
+}
+
+.plan-icon--starter .plan-icon__square--right {
+  top: 27.5%;
+  left: 55%;
+  right: 0;
+  bottom: 27.5%;
+}
+
+/* Individual Plan Icons */
+.plan-icon--individual .plan-icon__square--top-left {
+  top: 0;
+  left: 0;
+  right: 55%;
+  bottom: 55%;
+}
+
+.plan-icon--individual .plan-icon__square--bottom-left {
+  top: 55%;
+  left: 0;
+  right: 55%;
+  bottom: 0;
+}
+
+.plan-icon--individual .plan-icon__square--top-right {
+  top: 0;
+  left: 55%;
+  right: 0;
+  bottom: 55%;
+}
+
+.plan-icon--individual .plan-icon__square--bottom-right {
+  top: 55%;
+  left: 55%;
+  right: 0;
+  bottom: 0;
+}
+
+/* Teams Plan Icons */
+.plan-icon--teams .plan-icon__square--top-left {
+  top: 0;
+  left: 0;
+  right: 70%;
+  bottom: 70%;
+}
+
+.plan-icon--teams .plan-icon__square--middle-left {
+  top: 35%;
+  left: 0;
+  right: 70%;
+  bottom: 35%;
+}
+
+.plan-icon--teams .plan-icon__square--bottom-center {
+  top: 70%;
+  left: 35%;
+  right: 35%;
+  bottom: 0;
+}
+
+.plan-icon--teams .plan-icon__square--top-center {
+  top: 0;
+  left: 35%;
+  right: 35%;
+  bottom: 70%;
+}
+
+.plan-icon--teams .plan-icon__square--middle-right {
+  top: 35%;
+  left: 70%;
+  right: 0;
+  bottom: 35%;
+}
+
+.plan-icon--teams .plan-icon__square--center {
+  top: 35%;
+  left: 35%;
+  right: 35%;
+  bottom: 35%;
+}
+
+.plan-icon--teams .plan-icon__square--bottom-right {
+  top: 70%;
+  left: 70%;
+  right: 0;
+  bottom: 0;
+}
+
+/* Responsive Design */
+@media (max-width: 640px) {
+  .card {
+    max-width: 100%;
+  }
+  
+  .card__header {
+    padding: var(--gap-m);
+    gap: var(--gap-s);
+  }
+  
+  .card__body {
+    padding: var(--gap-m);
+  }
+  
+  .card__footer {
+    padding: var(--gap-s) var(--gap-m);
+  }
+  
+  .card__plan-name {
+    font-size: var(--scale-350);
+  }
+  
+  .card__price-amount {
+    font-size: var(--font-size-l);
+  }
+  
+  .card__footer-amount {
+    font-size: var(--scale-350);
+  }
+}
+
+
+/* src/components/Icon/Icon.css */
+@import '../../tokens/tokens.css';
+
+/* Icon Base Styles */
+.icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  user-select: none;
+  cursor: default;
+}
+
+.icon svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+/* Icon Sizes */
+.icon--xs {
+  width: var(--scale-200);
+  height: var(--scale-200);
+}
+
+.icon--s {
+  width: var(--scale-250);
+  height: var(--scale-250);
+}
+
+.icon--m {
+  width: var(--scale-300);
+  height: var(--scale-300);
+}
+
+.icon--l {
+  width: var(--scale-400);
+  height: var(--scale-400);
+}
+
+/* Clickable Icons */
+.icon[onclick] {
+  cursor: pointer;
+  transition: opacity 0.2s ease;
+}
+
+.icon[onclick]:hover {
+  opacity: 0.7;
+}
+
+.icon[onclick]:active {
+  opacity: 0.5;
+}
+
+/* Icon Colors */
+.icon--primary {
+  color: var(--color-content-primary);
+}
+
+.icon--secondary {
+  color: var(--color-content-secondary);
+}
+
+.icon--accent {
+  color: var(--color-accent-default);
+}
+
+.icon--success {
+  color: var(--color-feedback-positive-default);
+}
+
+.icon--warning {
+  color: var(--color-feedback-warning-default);
+}
+
+.icon--error {
+  color: var(--color-feedback-negative-default);
+}
+
+.icon--white {
+  color: var(--color-content-on-inverted-heading);
+}
+
+/* Responsive Design */
+@media (max-width: 640px) {
+  .icon--l {
+    width: var(--scale-350);
+    height: var(--scale-350);
+  }
+  
+  .icon--m {
+    width: var(--scale-275);
+    height: var(--scale-275);
+  }
+}
+