synkra-ds 0.1.1

package/src/assets/logos/social/white/Threads.svg

@@ -0,0 +1,3 @@
+<svg width="40" height="46" viewBox="0 0 40 46" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M29.861 20.8173C29.51 14.3455 25.974 10.6405 20.0373 10.6037C16.458 10.582 13.4658 12.0987 11.6328 14.8785L14.9002 17.1167C16.2738 15.0345 18.4427 14.6033 20.0135 14.6185C21.97 14.6315 23.4433 15.1992 24.3988 16.3085C25.0922 17.1145 25.558 18.2303 25.7898 19.6365C24.0565 19.3418 22.1802 19.2508 20.1782 19.3657C14.5318 19.6907 10.9048 22.984 11.1475 27.5578C11.271 29.8783 12.4258 31.876 14.4018 33.1803C16.0702 34.2832 18.2238 34.8205 20.4577 34.6992C23.4108 34.5367 25.727 33.41 27.3433 31.3517C28.5697 29.7873 29.3453 27.7593 29.6877 25.207C31.096 26.0563 32.136 27.1722 32.7145 28.5155C33.6938 30.7992 33.7502 34.5518 30.6887 37.6112C28.0063 40.2892 24.7823 41.4505 19.9095 41.4852C14.5037 41.4462 10.4152 39.7107 7.75883 36.3328C5.26717 33.1695 3.98233 28.5978 3.93467 22.75C3.98233 16.9 5.26933 12.3305 7.75883 9.165C10.4152 5.78717 14.5037 4.05383 19.9095 4.01483C25.3543 4.056 29.5122 5.79583 32.2725 9.19317C33.6267 10.8572 34.645 12.9502 35.3188 15.3898L39.1452 14.3715C38.3283 11.3663 37.0457 8.77717 35.3015 6.63C31.7633 2.275 26.5633 0.0455 19.8965 0C13.2427 0.0455 8.125 2.28583 4.68867 6.65383C1.6315 10.543 0.052 15.9835 0 22.7652C0.052 29.5468 1.6315 34.957 4.68867 38.8462C8.12717 43.2142 13.2687 45.4545 19.9203 45.5C25.8375 45.4588 30.0062 43.9097 33.4403 40.4798C37.9362 35.9883 37.7997 30.3615 36.3198 26.9078C35.1823 24.2537 32.9182 22.1282 29.8632 20.8195L29.861 20.8173ZM20.2453 30.6908C17.771 30.8295 15.2013 29.7202 15.0735 27.3412C14.9803 25.5775 16.3302 23.6102 20.397 23.3762C22.235 23.2528 24.0813 23.3796 25.8852 23.7532C25.4172 29.6075 22.6677 30.5565 20.2453 30.6908Z" fill="white"/>
+</svg>

package/src/assets/logos/social/white/TikTok.svg

@@ -0,0 +1,5 @@
+<svg width="53" height="53" viewBox="0 0 53 53" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M37.3081 19.3404C40.5654 21.6772 44.5559 23.0521 48.8658 23.0521V14.729C48.0502 14.7292 47.2366 14.6439 46.4386 14.4742V21.0256C42.129 21.0256 38.1391 19.6507 34.8808 17.3141V34.2991C34.8808 42.7958 28.0174 49.6833 19.5513 49.6833C16.3924 49.6833 13.4564 48.7249 11.0174 47.0812C13.8011 49.9376 17.6832 51.7096 21.978 51.7096C30.4446 51.7096 37.3084 44.8221 37.3084 36.325V19.3404H37.3081ZM40.3023 10.9434C38.6376 9.11826 37.5446 6.75956 37.3081 4.15192V3.08139H35.0079C35.5869 6.39571 37.5617 9.22726 40.3023 10.9434ZM16.3722 40.5611C15.4421 39.3372 14.9395 37.8401 14.9417 36.3007C14.9417 32.4146 18.081 29.2637 21.9541 29.2637C22.6759 29.2635 23.3934 29.3745 24.0813 29.5935V21.0844C23.2774 20.9738 22.4661 20.9269 21.6551 20.9441V27.5672C20.9667 27.3481 20.2489 27.2369 19.5269 27.2376C15.6538 27.2376 12.5147 30.3881 12.5147 34.2747C12.5147 37.0229 14.0838 39.4021 16.3722 40.5611Z" fill="white"/>
+<path d="M34.8807 17.3139C38.139 19.6505 42.1289 21.0255 46.4385 21.0255V14.474C44.0329 13.9598 41.9034 12.6982 40.3022 10.9434C37.5614 9.22709 35.5868 6.39553 35.0078 3.08139H28.966V36.3247C28.9524 40.2002 25.8184 43.3382 21.9537 43.3382C19.6762 43.3382 17.6529 42.2487 16.3716 40.5611C14.0834 39.4021 12.5142 37.0227 12.5142 34.2749C12.5142 30.3887 15.6534 27.2377 19.5265 27.2377C20.2685 27.2377 20.9837 27.3537 21.6547 27.5674V20.9443C13.3373 21.1167 6.64819 27.9369 6.64819 36.3249C6.64819 40.5121 8.31394 44.3079 11.0175 47.0814C13.4565 48.7249 16.3925 49.6835 19.5514 49.6835C28.0176 49.6835 34.8809 42.7957 34.8809 34.2991V17.3139H34.8807Z" fill="white"/>
+<path d="M46.4385 14.4741V12.7026C44.2693 12.7059 42.1427 12.0962 40.3022 10.9433C41.9314 12.7334 44.0768 13.9677 46.4385 14.4741ZM35.0079 3.08144C34.9526 2.7647 34.9102 2.44587 34.8808 2.12582V1.0553H26.5387V34.299C26.5254 38.1739 23.3916 41.312 19.5265 41.312C18.3917 41.312 17.3204 41.0416 16.3716 40.5613C17.653 42.2488 19.6763 43.3381 21.9537 43.3381C25.8181 43.3381 28.9526 40.2004 28.9661 36.3249V3.08144H35.0079ZM21.655 20.9443V19.0585C20.958 18.9629 20.2552 18.9149 19.5516 18.9152C11.0847 18.9151 4.22119 25.8029 4.22119 34.299C4.22119 39.6255 6.91866 44.3198 11.0177 47.0811C8.31415 44.3078 6.6484 40.5118 6.6484 36.3247C6.6484 27.937 13.3374 21.1168 21.655 20.9443Z" fill="white"/>
+</svg>

package/src/assets/logos/social/white/Tinder.svg

@@ -0,0 +1,3 @@
+<svg width="53" height="53" viewBox="0 0 53 53" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17.7835 21.3987C17.7552 21.4089 17.7245 21.41 17.6955 21.402C17.6666 21.3939 17.6408 21.377 17.6218 21.3537C15.8339 18.981 15.3847 14.9019 15.2754 13.3352C15.2529 13.0335 14.9145 12.8639 14.6435 13.0155C9.12259 16.1236 4 23.4757 4 30.5743C4 42.7694 12.4513 53 27 53C40.6308 53 50 42.4557 50 30.5758C50 15.031 38.9163 4.70284 29.0439 0.0340024C28.9862 0.00670375 28.9222 -0.00448213 28.8587 0.00162344C28.7951 0.00772901 28.7344 0.0308999 28.6829 0.0686948C28.6314 0.10649 28.591 0.157509 28.566 0.216377C28.541 0.275245 28.5323 0.339782 28.5408 0.403187C29.8121 8.78038 28.0557 17.8914 17.7835 21.3987Z" fill="white"/>
+</svg>

package/src/assets/logos/social/white/Trello.svg

@@ -0,0 +1,12 @@
+<svg width="53" height="53" viewBox="0 0 53 53" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_201_1390)">
+<path d="M47.8242 0H5.17578C2.31728 0 0 2.31728 0 5.17578V47.8242C0 50.6827 2.31728 53 5.17578 53H47.8242C50.6827 53 53 50.6827 53 47.8242V5.17578C53 2.31728 50.6827 0 47.8242 0Z" fill="white"/>
+<path d="M43.6256 6.89H32.4294C31.0573 6.89 29.945 8.00229 29.945 9.37437V27.5931C29.945 28.9652 31.0573 30.0775 32.4294 30.0775H43.6256C44.9977 30.0775 46.11 28.9652 46.11 27.5931V9.37437C46.11 8.00229 44.9977 6.89 43.6256 6.89Z" fill="black"/>
+<path d="M20.5706 6.89H9.37437C8.00229 6.89 6.89 8.00229 6.89 9.37437V40.8431C6.89 42.2152 8.00229 43.3275 9.37437 43.3275H20.5706C21.9427 43.3275 23.055 42.2152 23.055 40.8431V9.37437C23.055 8.00229 21.9427 6.89 20.5706 6.89Z" fill="black"/>
+</g>
+<defs>
+<clipPath id="clip0_201_1390">
+<rect width="53" height="53" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/src/assets/logos/social/white/Tumblr.svg

@@ -0,0 +1,4 @@
+<svg width="53" height="53" viewBox="0 0 53 53" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="26.5" cy="26.5" r="26.5" fill="white"/>
+<path d="M34 41V35.2615H30.9C30.7702 35.2615 30.6467 35.2453 30.5293 35.2153C28.371 34.6633 28.7 31.4761 28.7 29.2484V24.8092H33.7V24.7067V19.2756H28.7V12H24.3C24.3 16.8367 20.1 19.4122 18 20.0954V24.8092H21.9V34.2367C21.9 39.0735 26.3 40.7609 28.5 41H34Z" fill="black"/>
+</svg>

package/src/assets/logos/social/white/Twitch.svg

@@ -0,0 +1,3 @@
+<svg width="53" height="53" viewBox="0 0 53 53" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.24379 3.16589L4.2212 11.2321V43.4929H15.2989V49.5455H21.3467L27.3887 43.4929H36.4541L48.5438 31.399V3.16589H7.24379ZM11.2707 7.1964H44.5149V29.3785L37.4616 36.4372H26.3825L20.3423 42.4816V36.4373H11.2707V7.1964ZM22.3528 27.3645H26.3825V15.2669H22.3528V27.3645ZM33.4329 27.3645H37.4618V15.2669H33.4329V27.3645Z" fill="white"/>
+</svg>

package/src/assets/logos/social/white/Vine.svg

@@ -0,0 +1,3 @@
+<svg width="53" height="53" viewBox="0 0 53 53" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M42.9003 0.9313C38.4532 -0.749958 32.879 -0.243213 29.3697 3.17614C26.0735 6.35869 25.0553 11.2083 25.4057 15.6364C25.7562 22.0773 29.1661 28.5324 35.0102 31.5634C32.628 36.2567 29.6349 40.6706 25.9125 44.4072C21.7827 39.4676 18.5623 33.7845 16.4122 27.7178C14.1152 21.3479 12.8602 14.6608 12.0172 7.95943C9.01464 7.93575 6.00732 7.95943 3 7.94996V8.30989C4.34974 17.8149 6.45723 27.32 10.4923 36.0767C12.9928 41.4425 16.1754 46.6331 20.6698 50.5639C22.1048 51.7479 23.7292 53.055 25.6946 52.9982C27.8874 52.8751 29.5118 51.227 31.051 49.8488C35.9669 45.1129 40.1203 39.5481 43.1276 33.4104C45.5176 33.3419 47.9519 33.075 50.2828 32.4674C50.712 32.3556 51.0036 31.9631 51.0036 31.5196V27.2872C51.0036 26.6028 50.3306 26.12 49.6664 26.2849C48.4895 26.5772 47.2802 26.7424 46.0639 26.7706C42.7487 26.9221 39.301 25.7571 37.0277 23.2897C34.3046 20.3771 33.4284 16.1384 33.8783 12.2691C34.0962 10.6921 34.7071 8.89715 36.2842 8.21991C37.7334 7.55688 39.5283 8.31463 40.1487 9.75909C41.5079 12.8327 40.7075 16.2852 39.9403 19.4015C41.3706 22.0062 44.9225 22.5651 47.622 21.9636C49.4264 17.6065 50.0042 12.6528 48.8676 8.04942C48.1051 4.92843 45.9455 2.10108 42.9003 0.9313Z" fill="white"/>
+</svg>

package/src/assets/logos/social/white/WhatsApp.svg

@@ -0,0 +1,11 @@
+<svg width="53" height="53" viewBox="0 0 53 53" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 25.3272C0 13.3878 0 7.41816 3.70908 3.70908C7.41816 0 13.3878 0 25.3272 0H27.4378C39.3772 0 45.3468 0 49.0559 3.70908C52.765 7.41816 52.765 13.3878 52.765 25.3272V27.4378C52.765 39.3772 52.765 45.3468 49.0559 49.0559C45.3468 52.765 39.3772 52.765 27.4378 52.765H25.3272C13.3878 52.765 7.41816 52.765 3.70908 49.0559C0 45.3468 0 39.3772 0 27.4378V25.3272Z" fill="url(#paint0_linear_201_1382)"/>
+<path d="M19.4182 36.9153L19.9012 37.1541C21.9142 38.3478 24.1686 38.9048 26.423 38.9048C33.5083 38.9048 39.3053 33.175 39.3053 26.1718C39.3053 22.8294 37.9365 19.5665 35.5211 17.179C33.1057 14.7915 29.885 13.4387 26.423 13.4387C19.3377 13.4387 13.5406 19.1686 13.6212 26.2514C13.6212 28.6388 14.3458 30.9468 15.5535 32.9362L15.8755 33.4138L14.5874 38.1091L19.4182 36.9153Z" fill="white"/>
+<path d="M36.8898 15.9057C34.1523 13.1204 30.3682 11.6083 26.5035 11.6083C18.2911 11.6083 11.6889 18.2136 11.7693 26.2513C11.7693 28.7979 12.4939 31.265 13.7017 33.4933L11.6083 41.0535L19.4182 39.064C21.5921 40.2578 24.0074 40.8149 26.423 40.8149C34.5549 40.8149 41.1571 34.2095 41.1571 26.1719C41.1571 22.2723 39.6272 18.6115 36.8898 15.9057ZM26.5035 38.3479C24.3296 38.3479 22.1557 37.7909 20.3038 36.6767L19.8208 36.438L15.151 37.6316L16.3587 33.0956L16.0366 32.618C12.4939 26.9678 14.1848 19.4869 19.9818 15.9852C25.7788 12.4837 33.2667 14.1549 36.8094 19.8848C40.352 25.6147 38.6611 33.0158 32.8642 36.5175C31.0122 37.7112 28.7579 38.3479 26.5035 38.3479ZM33.5887 29.5144L32.7031 29.1165C32.7031 29.1165 31.4149 28.5594 30.6098 28.1614C30.5292 28.1614 30.4487 28.0818 30.3682 28.0818C30.1266 28.0818 29.9656 28.1614 29.8046 28.2411C29.8046 28.2411 29.7241 28.3206 28.5969 29.5939C28.5163 29.7531 28.3553 29.8327 28.1943 29.8327H28.1137C28.0333 29.8327 27.8723 29.7531 27.7917 29.6735L27.3891 29.5144C26.5035 29.1165 25.6984 28.6389 25.0542 28.0023C24.8932 27.8431 24.6516 27.684 24.4906 27.5248C23.927 26.9678 23.3634 26.331 22.9609 25.6148L22.8803 25.4557C22.7999 25.376 22.7999 25.2965 22.7193 25.1373C22.7193 24.9782 22.7193 24.819 22.7999 24.7394C22.7999 24.7394 23.1219 24.3415 23.3634 24.1028C23.5245 23.9435 23.6049 23.7049 23.766 23.5457C23.927 23.3069 24.0075 22.9886 23.927 22.7499C23.8465 22.3519 22.8803 20.2032 22.6388 19.7258C22.4777 19.487 22.3168 19.4075 22.0752 19.3278H21.1896C21.0285 19.3278 20.8676 19.4075 20.7064 19.4075L20.6259 19.487C20.4648 19.5666 20.3038 19.7258 20.1428 19.8053C19.9818 19.9646 19.9012 20.1236 19.7402 20.2829C19.1766 20.9991 18.8546 21.8745 18.8546 22.7499C18.8546 23.3865 19.0156 24.0232 19.2572 24.5803L19.3377 24.819C20.0624 26.331 21.0285 27.684 22.3168 28.8777L22.6388 29.196C22.8803 29.4348 23.1219 29.5939 23.2829 29.8326C24.9737 31.2652 26.906 32.2997 29.0799 32.8568C29.3215 32.9363 29.6435 32.9363 29.8851 33.0159H30.6902C31.0928 33.0159 31.5758 32.8568 31.898 32.6976C32.1395 32.5385 32.3005 32.5385 32.4615 32.3793L32.6226 32.2201C32.7836 32.0609 32.9447 31.9814 33.1057 31.8222C33.2667 31.6631 33.4277 31.5039 33.5083 31.3447C33.6693 31.0264 33.7497 30.6284 33.8303 30.2306V29.6735C33.8303 29.6735 33.7497 29.5939 33.5887 29.5144Z" fill="black"/>
+<defs>
+<linearGradient id="paint0_linear_201_1382" x1="26.3825" y1="0" x2="26.3825" y2="52.765" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="0.765625" stop-color="white"/>
+</linearGradient>
+</defs>
+</svg>

package/src/assets/logos/social/white/X.svg

@@ -0,0 +1,3 @@
+<svg width="52" height="53" viewBox="0 0 52 53" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0.0390684 53H4.571L22.308 32.4386L36.4117 53H52L30.9812 22.5084L50.281 0H45.6709L28.9106 19.471L15.4711 0H0L20.3156 29.518L0.0390684 53ZM6.25094 3.46583H13.2442L45.71 49.7289H38.6386L6.25094 3.46583Z" fill="white"/>
+</svg>

package/src/assets/logos/social/white/YouTube.svg

@@ -0,0 +1,11 @@
+<svg width="53" height="53" viewBox="0 0 53 53" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_201_1364)">
+<path d="M21.106 34.0746V18.6903L34.8249 26.3825L21.106 34.0746Z" fill="black"/>
+<path d="M51.6518 14.0441C51.3515 12.9604 50.7636 11.9724 49.9467 11.1789C49.1299 10.3853 48.1129 9.81415 46.9974 9.52246C42.8895 8.4424 26.3825 8.4424 26.3825 8.4424C26.3825 8.4424 9.87547 8.4424 5.76757 9.52246C4.6521 9.81415 3.63506 10.3853 2.81823 11.1789C2.0014 11.9724 1.41344 12.9604 1.11319 14.0441C0.346153 18.1141 -0.0260692 22.245 0.00141786 26.3825C-0.0260692 30.52 0.346153 34.6509 1.11319 38.7209C1.41344 39.8045 2.0014 40.7926 2.81823 41.5861C3.63506 42.3796 4.6521 42.9508 5.76757 43.2425C9.87547 44.3226 26.3825 44.3226 26.3825 44.3226C26.3825 44.3226 42.8895 44.3226 46.9974 43.2425C48.1129 42.9508 49.1299 42.3796 49.9467 41.5861C50.7636 40.7926 51.3515 39.8045 51.6518 38.7209C52.4188 34.6509 52.791 30.52 52.7636 26.3825C52.791 22.245 52.4188 18.1141 51.6518 14.0441ZM21.1063 34.0711V18.6939L34.8056 26.3825L21.1063 34.0711Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_201_1364">
+<rect width="52.765" height="52.765" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/src/styles/globals.css

@@ -0,0 +1,174 @@
+/*
+ * Synkra DS - Global Styles
+ * Tailwind v4 with @theme configuration
+ * Brand: Lendario | Theme: Dark
+ */
+
+@import "tailwindcss";
+@import "../tokens/tokens.css";
+@import "../tokens/palette-extended.css";
+
+/* ============================================================================
+ * TAILWIND v4 THEME CONFIGURATION
+ * Maps design tokens to Tailwind utility classes
+ * ============================================================================ */
+
+@theme {
+  /* Colors */
+  --color-primary: #D4AF37;
+  --color-primary-dark: #B8962E;
+  --color-primary-light: #E4C84A;
+
+  --color-bg-base: #0A0A0F;
+  --color-bg-elevated: #111116;
+  --color-bg-surface: #1a1a1f;
+
+  --color-text-primary: #FFFFFF;
+  --color-text-secondary: #A1A1AA;
+  --color-text-muted: #71717A;
+  --color-text-inverse: #0A0A0F;
+
+  --color-success: #22C55E;
+  --color-warning: #F59E0B;
+  --color-error: #EF4444;
+  --color-info: #3B82F6;
+
+  --color-border: rgba(255, 255, 255, 0.1);
+  --color-border-subtle: rgba(255, 255, 255, 0.05);
+  --color-border-emphasis: rgba(212, 175, 55, 0.3);
+
+  /* Typography */
+  --font-sans: 'Inter', sans-serif;
+  --font-serif: 'Source Serif 4', serif;
+  --font-display: 'Rajdhani', sans-serif;
+  --font-mono: 'JetBrains Mono', monospace;
+
+  /* Radius */
+  --radius-sm: 0.25rem;
+  --radius-md: 0.375rem;
+  --radius-lg: 0.5rem;
+  --radius-xl: 0.75rem;
+  --radius-2xl: 1rem;
+
+  /* Shadows */
+  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
+  --shadow-glow: 0 0 20px rgba(212, 175, 55, 0.3);
+
+  /* Motion */
+  --duration-fast: 100ms;
+  --duration-normal: 200ms;
+  --duration-slow: 300ms;
+
+  --ease-in: cubic-bezier(0.4, 0, 1, 1);
+  --ease-out: cubic-bezier(0, 0, 0.2, 1);
+  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* ============================================================================
+ * BASE STYLES
+ * ============================================================================ */
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  font-size: 16px;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+}
+
+body {
+  font-family: var(--font-sans);
+  font-size: var(--text-base);
+  line-height: var(--leading-base);
+  color: var(--color-text-primary);
+  background-color: var(--color-bg-base);
+}
+
+/* ============================================================================
+ * TYPOGRAPHY BASE
+ * ============================================================================ */
+
+h1, h2, h3, h4, h5, h6 {
+  font-family: var(--font-display);
+  font-weight: var(--font-semibold);
+  line-height: 1.2;
+  color: var(--color-text-primary);
+}
+
+h1 { font-size: var(--text-4xl); }
+h2 { font-size: var(--text-3xl); }
+h3 { font-size: var(--text-2xl); }
+h4 { font-size: var(--text-xl); }
+h5 { font-size: var(--text-lg); }
+h6 { font-size: var(--text-base); }
+
+p {
+  color: var(--color-text-secondary);
+  line-height: var(--leading-base);
+}
+
+a {
+  color: var(--color-primary);
+  text-decoration: none;
+  transition: color var(--duration-fast) var(--ease-in-out);
+}
+
+a:hover {
+  color: var(--color-primary-light);
+}
+
+code, pre {
+  font-family: var(--font-mono);
+  font-size: var(--text-sm);
+}
+
+/* ============================================================================
+ * FOCUS STYLES (Accessibility)
+ * ============================================================================ */
+
+:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 2px;
+  border-radius: var(--radius-sm);
+}
+
+/* ============================================================================
+ * SELECTION
+ * ============================================================================ */
+
+::selection {
+  background-color: rgba(212, 175, 55, 0.3);
+  color: var(--color-text-primary);
+}
+
+/* ============================================================================
+ * SCROLLBAR (Dark Theme)
+ * ============================================================================ */
+
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--color-bg-base);
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--color-border);
+  border-radius: var(--radius-full);
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--color-text-muted);
+}

package/src/tokens/palette-extended.css

@@ -0,0 +1,119 @@
+/*
+ * Synkra DS - Extended Color Palette (watchOS)
+ * Source: assets/Cores/design-tokens-colors.css
+ * Usage: Charts, badges, tags, data visualization, accent colors
+ * DO NOT use for primary UI - use tokens.css instead
+ */
+
+:root {
+  /* ========== REDS & PINKS ========== */
+  --palette-red: #df1125;
+  --palette-neon-pink: #fb212f;
+  --palette-electric-pink: #fc3644;
+  --palette-hibiscus: #fb0049;
+  --palette-pink: #fd4154;
+  --palette-pink-citrus: #ea383a;
+  --palette-pomegranate: #d80e4f;
+  --palette-dragon-fruit: #f12e6d;
+  --palette-camellia: #bf3138;
+  --palette-red-rose: #ab1438;
+  --palette-plum: #81323d;
+
+  /* ========== ORANGES ========== */
+  --palette-orange: #fc4e12;
+  --palette-clementine: #fd513b;
+  --palette-apricot: #fc5c42;
+  --palette-papaya: #fd7036;
+  --palette-kumquat: #fd7441;
+  --palette-light-orange: #fd820b;
+  --palette-peach: #e0694e;
+  --palette-flamingo: #ca6f59;
+  --palette-rose-gold: #e99475;
+  --palette-pink-sand: #feb69c;
+  --palette-vintage-rose: #f29c98;
+  --palette-grapefruit: #fda27e;
+
+  /* ========== YELLOWS ========== */
+  --palette-cream: #ffe0ab;
+  --palette-mellow-yellow: #f7f6af;
+  --palette-canary-yellow: #ffda3a;
+  --palette-pollen: #e8c511;
+  --palette-flash-light: #faed0b;
+  --palette-lemon-cream: #ffeb6d;
+  --palette-flash: #dff81e;
+
+  /* ========== GREENS ========== */
+  --palette-green: #80e220;
+  --palette-spearmint: #77ea7e;
+  --palette-mint: #a2ec8e;
+  --palette-beryl: #d0f2b1;
+  --palette-sea-foam: #cff1d6;
+  --palette-turquoise: #91cec2;
+
+  /* ========== BLUES ========== */
+  --palette-blue: #1ea5fc;
+  --palette-light-blue: #5ebad9;
+  --palette-cerulean: #87b9e7;
+  --palette-surf-blue: #1871ac;
+  --palette-pacific-green: #0f6d8e;
+  --palette-blue-cobalt: #3a6b8e;
+  --palette-dark-teal: #2c6184;
+  --palette-blue-horizon: #1e538f;
+  --palette-denim-blue: #4b709a;
+  --palette-linen-blue: #455785;
+  --palette-deep-navy: #3a4565;
+  --palette-midnight-blue: #383b65;
+
+  /* ========== PURPLES ========== */
+  --palette-purple: #8962f8;
+  --palette-ultra-violet: #5f41b2;
+  --palette-lilac: #a990dd;
+  --palette-ocean-blue: #6273bd;
+  --palette-delft-blue: #4662b2;
+  --palette-indigo: #474e95;
+  --palette-lavender-gray: #757397;
+  --palette-lavender: #a58998;
+
+  /* ========== GRAYS & DARK GREENS ========== */
+  --palette-mist-blue: #a7ab99;
+  --palette-storm-gray: #578887;
+  --palette-cactus: #5b7971;
+  --palette-pine-green: #4e6c54;
+  --palette-cyprus-green: #525d49;
+  --palette-northern-blue: #638a8d;
+  --palette-azure: #788991;
+  --palette-alaskan-blue: #525c73;
+
+  /* ========== BROWNS & GOLDS ========== */
+  --palette-khaki: #7a6e49;
+  --palette-dark-olive: #7c7a66;
+  --palette-soft-white: #d8c9af;
+  --palette-antique-white: #cda986;
+  --palette-yellow-gold: #cc996d;
+  --palette-gold: #b08053;
+  --palette-camel: #a97d4f;
+  --palette-walnut: #a17455;
+  --palette-stone: #a28872;
+  --palette-pebble: #9f8d7e;
+  --palette-cocoa: #8b7d7d;
+  --palette-coastal-gray: #715d50;
+
+  /* ========== GRADIENTS ========== */
+  --gradient-badge: linear-gradient(82.44deg, #ff3b57 0%, #ffda1a 100%);
+  --gradient-purple-blue: linear-gradient(135deg, #8962f8, #1ea5fc);
+  --gradient-hibiscus-dragon: linear-gradient(135deg, #fb0049, #f12e6d);
+  --gradient-green-mint: linear-gradient(135deg, #80e220, #a2ec8e);
+  --gradient-gold-sunset: linear-gradient(135deg, #D4AF37, #fc4e12);
+
+  /* ========== CHART PALETTE (10 cores otimizadas para data viz) ========== */
+  --chart-1: #1ea5fc;
+  --chart-2: #D4AF37;
+  --chart-3: #22C55E;
+  --chart-4: #8962f8;
+  --chart-5: #fc4e12;
+  --chart-6: #fb0049;
+  --chart-7: #91cec2;
+  --chart-8: #f7f6af;
+  --chart-9: #a990dd;
+  --chart-10: #fd820b;
+}

package/src/tokens/tokens.css

@@ -0,0 +1,122 @@
+/*
+ * Synkra DS - Design Tokens (CSS Custom Properties)
+ * Brand: Lendario | Theme: Dark
+ * Generated by Brad - DO NOT edit manually
+ */
+
+:root {
+  /* ========== COLORS: Primary ========== */
+  --color-primary: #D4AF37;
+  --color-primary-dark: #B8962E;
+  --color-primary-light: #E4C84A;
+
+  /* ========== COLORS: Background ========== */
+  --color-bg-base: #0A0A0F;
+  --color-bg-elevated: #111116;
+  --color-bg-surface: #1a1a1f;
+  --color-bg-overlay: rgba(0, 0, 0, 0.8);
+
+  /* ========== COLORS: Text ========== */
+  --color-text-primary: #FFFFFF;
+  --color-text-secondary: #A1A1AA;
+  --color-text-muted: #71717A;
+  --color-text-inverse: #0A0A0F;
+
+  /* ========== COLORS: Semantic ========== */
+  --color-success: #22C55E;
+  --color-warning: #F59E0B;
+  --color-error: #EF4444;
+  --color-info: #3B82F6;
+
+  /* ========== COLORS: Border ========== */
+  --color-border: rgba(255, 255, 255, 0.1);
+  --color-border-subtle: rgba(255, 255, 255, 0.05);
+  --color-border-emphasis: rgba(212, 175, 55, 0.3);
+
+  /* ========== TYPOGRAPHY: Families ========== */
+  --font-sans: 'Inter', sans-serif;
+  --font-serif: 'Source Serif 4', serif;
+  --font-display: 'Rajdhani', sans-serif;
+  --font-mono: 'JetBrains Mono', monospace;
+
+  /* ========== TYPOGRAPHY: Sizes ========== */
+  --text-xs: 0.75rem;
+  --text-sm: 0.875rem;
+  --text-base: 1rem;
+  --text-lg: 1.125rem;
+  --text-xl: 1.25rem;
+  --text-2xl: 1.5rem;
+  --text-3xl: 1.875rem;
+  --text-4xl: 2.25rem;
+  --text-5xl: 3rem;
+
+  /* ========== TYPOGRAPHY: Line Heights ========== */
+  --leading-xs: 1rem;
+  --leading-sm: 1.25rem;
+  --leading-base: 1.5rem;
+  --leading-lg: 1.75rem;
+  --leading-xl: 1.75rem;
+  --leading-2xl: 2rem;
+  --leading-3xl: 2.25rem;
+  --leading-4xl: 2.5rem;
+  --leading-5xl: 1;
+
+  /* ========== TYPOGRAPHY: Weights ========== */
+  --font-normal: 400;
+  --font-medium: 500;
+  --font-semibold: 600;
+  --font-bold: 700;
+
+  /* ========== SPACING ========== */
+  --space-0: 0;
+  --space-px: 1px;
+  --space-0-5: 0.125rem;
+  --space-1: 0.25rem;
+  --space-2: 0.5rem;
+  --space-3: 0.75rem;
+  --space-4: 1rem;
+  --space-5: 1.25rem;
+  --space-6: 1.5rem;
+  --space-8: 2rem;
+  --space-10: 2.5rem;
+  --space-12: 3rem;
+  --space-16: 4rem;
+  --space-20: 5rem;
+  --space-24: 6rem;
+
+  /* ========== BORDERS & RADIUS ========== */
+  --radius-none: 0;
+  --radius-sm: 0.25rem;
+  --radius-md: 0.375rem;
+  --radius-lg: 0.5rem;
+  --radius-xl: 0.75rem;
+  --radius-2xl: 1rem;
+  --radius-full: 9999px;
+
+  /* ========== SHADOWS ========== */
+  --shadow-none: none;
+  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
+  --shadow-glow: 0 0 20px rgba(212, 175, 55, 0.3);
+
+  /* ========== MOTION ========== */
+  --duration-instant: 0ms;
+  --duration-fast: 100ms;
+  --duration-normal: 200ms;
+  --duration-slow: 300ms;
+  --duration-slower: 500ms;
+
+  --ease-linear: cubic-bezier(0, 0, 1, 1);
+  --ease-in: cubic-bezier(0.4, 0, 1, 1);
+  --ease-out: cubic-bezier(0, 0, 0.2, 1);
+  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+
+  /* ========== Z-INDEX ========== */
+  --z-dropdown: 50;
+  --z-sticky: 100;
+  --z-modal: 200;
+  --z-popover: 300;
+  --z-tooltip: 400;
+}